Angular Material – Custom SVG Icons

Overview

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 flaticons.com.

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) 
{
                this.matIconRegistry.addSvgIcon(
                  `icon_yourcustomname`,
                  this.domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/example-icon.svg')
;
}

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 https://material.angular.io/components/icon/overview