🟣Step 1 — Install Font Awesome via npm
First, install Font Awesome and the Angular component using npm:
npm install @fortawesome/fontawesome-free --savenpm install @fortawesome/angular-fontawesome@<version> --save🟣 Compatibility Table
| @fortawesome/angular-fontawesome | Angular | Font Awesome | ng-add |
|---|---|---|---|
| 0.1.x | 5.x | 5.x | not supported |
| 0.2.x | 6.x | 5.x | not supported |
| 0.3.x | 6.x && 7.x | 5.x | not supported |
| 0.4.x, 0.5.x | 8.x | 5.x | not supported |
| 0.6.x | 9.x | 5.x | supported |
| 0.7.x | 10.x | 5.x | supported |
| 0.8.x | 11.x | 5.x | supported |
| 0.9.x | 12.x | 5.x | supported |
| 0.10.x | 13.x | 5.x && 6.x | supported |
| 0.11.x | 14.x | 5.x && 6.x | supported |
| 0.12.x | 15.x | 5.x && 6.x | supported |
| 0.13.x | 16.x | 5.x && 6.x | supported |
| 0.14.x | 17.x | 5.x && 6.x | supported |
| 0.15.x | 18.x | 5.x && 6.x | supported |
🟣Step 2 — Using Font Awesome Icons in Angular Components
Import FontAwesomeModule and the necessary icons into your Angular component:
import { Component } from '@angular/core';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
imports: [FontAwesomeModule]
})
export class AppComponent {
faCoffee = faCoffee;
}
🟣Step 3 — Use Font Awesome Icons in your Template
Place the FontAwesome icon component (`fa-icon`) in your component's HTML template:
<fa-icon [icon]="faCoffee"></fa-icon>
That's it! You can now customize the icons using Font Awesome's extensive library of icons and CSS classes.
