Angular Material – Custom SVG Icons


The advantages to Angular Material Icons is they work well with with Material Themes. The only downside is they don’t offer a collection that is comparable in variety as Font-Awesome. To remedy this, there is an option to add your own SVG icons to the Material Icons.

Download the SVG files you want to use into your assets folder. Just a suggestion, add a sub-folder labeled “icons” under assets.

One of many resources to get SVG icons would be

In the component you will need to import the following libraries.

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

In the constructor add the following:

constructor(private matIconRegistry: MatIconRegistry,
              private domSanitizer: DomSanitizer) 

From the HTML template use <mat-icon> with the svgIcon property as follows:

<mat-icon svgIcon=”icon_yourcustomname”></mat-icon>

That’s it!

For more details on Material Icons go to