The Fontawesome/Angular documentation provides an example of adding an explicit reference, which may not be as convenient as using the library directly. If you value "explicit is better than implicit," then this method might be for you. The example code snippet from the documentation is shown below:
Explicit reference Not as convenient as using the library but if you believe "explicit is better than implicit" then this method is for you.
src/app/app.component.html
<div style="text-align:center">
<fa-icon [icon]="faCoffee"></fa-icon>
</div>
src/app/app.component.ts
import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
faCoffee = faCoffee;
}
Understanding the line 'faCoffee=faCoffee' in TypeScript/Angular - is this a bug, a hack, or some kind of magic? That is the question to be explored here.