I'm using angular 7.0.1 and angular material 7.0.2, I want to add the font awesome 5.4.2 icons and I'm trying to follow the steps on fontawesome web but I can't get the font awesome icon font.
first:
npm install --save-dev @fortawesome/fontawesome-free
then in styles.scss add:
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
and in _variables.scss add:
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
now in app.component.ts add:
import { MatIconRegistry } from "@angular/material";
[...]
constructor(
public matIconRegistry: MatIconRegistry,
) {
matIconRegistry.registerFontClassAlias ('fas'); // tried with 'fas' and with 'fa'
}
and finally I'm suposed to print the font awesome icons with:
<mat-icon mat-list-icon fontIcon="fas github"></mat-icon> // tryed also with 'fas-github', 'fasGithub', 'github', 'fa-github', 'fa github' and 'faGithub'
But the font awesome icon font is never printed. I'm missing something important and obvious but right now I'm not seeing it.
This is what I've done and it works for me:
In my styles.scss I have
@import "~@fortawesome/fontawesome-free/css/all.css";
Then I have
<mat-icon fontSet="fa" fontIcon="fa-clipboard-check"></mat-icon>
With scss it didnt work for me either.