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

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.


Add font awesome cdn link in your Index.html file:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Then try putting this code, It's working for me:

<md-icon class="fa fa-clock-o" aria-hidden="true"></md-icon>
<md-icon class="fa fa-bell" aria-hidden="true"></md-icon>