Icons are a necessity when building modern-day web apps and sometimes they can be frustrating. While icon sets like Font Awesome and Material Icons have made it easier, there is always an icon you need that is always missing. A good example is lack of social media icons in Material Icons for whatever reason.

To avoid this problem, you can use multiple icon sets or mix between an icon set and your own set of image icons. This introduces the issue of lack of consistency on your icons. To solve this problem, Angular material uses Angular material Icon Component. Let’s look at how to use mat-icons with different icon sets.

How to Setup the Mat-Icon Component

To use this component, import the MatIconModule from @angular/material in your app module as follows:

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

@NgModule({
  declarations: [AppComponent],
  imports: [
    // ...
    MatIconModule //...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Using Material Icons (Font)

This one is relatively easy. I would recommend one of two approaches. Approach 1, include the Google Material Font link from Google Font CDN in the header of your index.html in your application. Then after that, the Angular Material component – mat-icon – will recognize all material font icons by default. You can go ahead and use the icons as shown below. First, include the following in your index html header

<link
href=[https://fonts.googleapis.com/icon?family=Material+Icons](https://fonts.googleapis.com/icon?family=Material+Icons)
rel="stylesheet">

Then, you can simply use material icons as shown below:

<mat-icon>icon_name</mat-icon>

i.e. <mat-icon>home</mat-icon> for home icon

The second approach is to self-host the font icons on your own servers. You can install the icons using either npm and yarn as follows:

npm install material-design-icons@latest

//for yarn
yarn add material-design-icons@latest

Assuming you have successfully installed the material-design-icons@^3.0.1 package, then, go ahead and import the CSS stylesheet located here: ../node_modules/material-design-icons/iconfont/material-icons.css into your angular project inside your angular-cli.json, under the styles, as follows:

"styles": [
      // ...
      "../node_modules/material-design-icons/iconfont/material-icons.css", //icon.css
      "scss/styles.scss",
      // ...
    ],

Assuming you have successfully imported the stylesheet into your project, you can go ahead and start using the material icons. You can also use CSS font-size property to vary the size of the icons, as follows:

.material-icons.md-14 {
   font-size: 14px;
}

.material-icons.md-18 {
   font-size: 18px;
}

.material-icons.md-24 {
   font-size: 24px;
}

.material-icons.md-36 {
   font-size: 36px;
}

.material-icons.md-48 {
   font-size: 48px;
}

And then just include the md-* in your mat-icon to vary the size of the icons. The icons may be vertically aligned on top, this keeps them out of line with the content. To solve this problem, align them in the middle vertically as follows:

.material-icons {
       vertical-align: middle;
}

Using SVG Icons

If you have a set of SVG Icons for your angular application, you can register them with the Angular Material Icon module. This allows you to reference them anywhere in your application with ease and apply styles to your icons just like normal font icons. I use this method to include icons that are missing from the icon set am using. To register your SVG icons, follow the steps below: Identify the first component of your application (in most cases it will be the app.component.ts) and them import the MatIconRegistry module as follows:

import { MatIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';

The DomSanitizer is there to mark paths to the SVG icons as trusted resources and ensure they are loaded. Then, create a constructor class to register new icons as follows:

public constructor (
    private domSanitizer: DomSanitizer,
    public matIconRegistry: MatIconRegistry) {
    //add custom material icons
    matIconRegistry.addSvgIcon('iconName', domSanitizer.bypassSecurityTrustResourceUrl('/path/to/your/svg/icon.svg'));
}

Now, you can go ahead and use the icons anywhere in angular application as follows:

<mat-icon svgIcon="iconName"></mat-icon>

Please note that in this case I have used the svgIcon=iconName to reference to the icon.

NOTE: The icons are loaded via XmlHttpRequest and due to the same-origin policy, their URLs must be on the same domain as the containing page, or their servers must be configured to allow cross-domain access.

Using Class Based Icons (Font Awesome and Similar Icons)

You can also use Font Awesome and other icon sets that use CSS Classes to load font with Mat-Icon Component. And just like SVG Icons, you must register the parent class first in your application. To use Font-Awesome, follow the steps below. Identify the first component of your application (in most cases it will be the app.component.ts) and them import the MatIconRegistry module as follows:

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

Then register the font-awesome class – fa – under the component constructor.

public constructor (public matIconRegistry: MatIconRegistry) {
    //add custom material icons
    matIconRegistry.registerFontClassAlias ('fa');
}

Then set the fontIcon to the class of the icon you wish to show, as follows:

<mat-icon fontIcon="fa-home"></mat-icon>

Please note that in this case I have used the fontIcon=iconName to reference to the icon. Adding Font-Awesome to your Angular Project First, install font-awesome using either NPM or Yarn as shown below:

npm install --save font-awesome

//for yarn
yarn add font-awesome

Then, if you using are SASS, include this on your styles.scss:

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome'; //path to font awesome SCSS

Then create a _variables.scss and add the path to the fonts in the $fa-font-path variable:

$fa-font-path: '../node_modules/font-awesome/fonts';

If you are using CSS, include the path to the font-awesome CSS in your angular-cli.json as show below:

"styles": [  
   "../node_modules/font-awesome/css/font-awesome.css"
]

Please note, the methods described in this post are not the only way to accomplish this. Thank you.