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>