Use font awesome 5 on angular material 7

Question

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.

Answer 1

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.