How to use custom svg icon in Angular material design

In this example we will register svg icon in our Angular application (Angular 8 in our case) and use it inside of mat-icon element as a regular icon. We will show two different ways, by loading the svg file addSvgIcon() and by using literal svg source addSvgIconLiteral().

Let's assume you already have angular material installed in your application.
First we have to find our icon on https://materialdesignicons.com/ like for example this one: book-open-page-variant. Download the icon to your application folder, for example src/assets/icons/book-open-page-variant.svg

Next, open app.components.ts and include MatIconRegistry and DomSanitizer

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

constructor(
    private matIconRegistry:MatIconRegistry,
    private domSanitzer:DomSanitizer,
){}

Now when we included Material Icon Registry we can actually register our icon to be used anywhere inside of our application. In this tutorial we will show two different examples: using svg file, and using svg code

1. Import SVG as a file to your Angular Material app
In our app.components.ts inside of constructor we will simply call MatIconRegistry give our icon a name and path where the file is located:

constructor(
    private matIconRegistry:MatIconRegistry,
    private domSanitzer:DomSanitizer,
){
  this.matIconRegistry.addSvgIcon(
    'open_book',
    this.domSanitzer.bypassSecurityTrustResourceUrl('assets/icons/book-open-page-variant.svg')
  );
}

2. Import SVG as a inline code to your Angular Material app

constructor(
    private matIconRegistry:MatIconRegistry,
    private domSanitzer:DomSanitizer,
){
  this.matIconRegistry.addSvgIconLiteral(
  'open_book',
  this.domSanitzer.bypassSecurityTrustHtml('<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M19,2L14,6.5V17.5L19,13V2M6.5,5C4.55,5 2.45,5.4 1,6.5V21.16C1,21.41 1.25,21.66 1.5,21.66C1.6,21.66 1.65,21.59 1.75,21.59C3.1,20.94 5.05,20.5 6.5,20.5C8.45,20.5 10.55,20.9 12,22C13.35,21.15 15.8,20.5 17.5,20.5C19.15,20.5 20.85,20.81 22.25,21.56C22.35,21.61 22.4,21.59 22.5,21.59C22.75,21.59 23,21.34 23,21.09V6.5C22.4,6.05 21.75,5.75 21,5.5V7.5L21,13V19C19.9,18.65 18.7,18.5 17.5,18.5C15.8,18.5 13.35,19.15 12,20V13L12,8.5V6.5C10.55,5.4 8.45,5 6.5,5V5Z" /></svg>')
  );
}

After you have implemented one of these options, we can now simply use our icon inside of any component like this:

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

How to use custom svg icon in Angular material design

Angular

Material Design