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.