How to correctly register font-awesome for md-icon?

Question

The documentation of md-icon describes how to use font-awesome in several parts and suggests we could use font-awesome eventually like

<md-icon fontSet="fa" fontIcon="alarm"></md-icon>

But the documentation is very confusing and I can hardly find a routine to register 3rd font set like font-awesome for md-icon via Google.

Any help is appreciated!

PS: I know the normal <i> way generally works but it doesn't seem working in some examples, where the md-icon is used originally.

Answer 1

In your AppModule add:

import { MatIconModule, MatIconRegistry } from '@angular/material';

Then add MatIconModule to your imports e.g.:

imports: [...
   MatIconModule
...]

Add MatIconRegistry to your providers:

providers: [...
    MatIconRegistry
....]

Then add the following to your AppModule class:

export class AppModule {
    constructor(
        ...public matIconRegistry: MatIconRegistry) {
        matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
    }

Then you can use anywhere in your project like so:

<mat-icon fontSet="fa" fontIcon="fa-times-circle"></mat-icon>

Update

You'll need to include fontawesome in your project somewhere. I use angular-cli so adding the font-awesome npm package:

npm install font-awesome --save

and including it in styles list in angular-cli.json file works for me:

"styles": [
    ...
    "../node_modules/font-awesome/scss/font-awesome.scss",
  ],

Update 2

Changed prefixes to 'Mat' to reflect recent updates to angular material.