Angular: Add your own icons to existing Material Icons with ease

Angular Material offers an easy way to use the existing Material Icons. For example

<mat-icon>computer</mat-icon>

Here is a more real example

<mat-list>
  <h3 mat-subheader>Items</h3>

  <mat-list-item>
    <mat-icon>computer</mat-icon>
    <h4>Computer</h4>
  </mat-list-item>

  <mat-list-item>
    <mat-icon>headset</mat-icon>
    <h4>Headset</h4>
  </mat-list-item>

</mat-list>

which should look something like

Its so easy to use it like that. All you have to do is pick an icon from the Google’s Material Icons and just sandwich it in the mat-icon tag. You will see the icon shining in the browser.

But sooner or later you will find that you need icons which are not available. In that scenario you will generally start by searching on the web or creating your own icons. And then you will try to use that icon in an img or svg element, have to scale, align, resize, add formatting and styles to make it match with other existing icons.

[amazon_auto_links id=”529″]

Thanks to Angular Material, they have done the hard work for you. Now lets see how we can do it the material way 😉 in three easy steps.

1. Find the icon and add it to the app
2. Register it with Angular Material
3. Use it!

Find the icon and add it to the app – For this example we will use an SVG icon. Lets say you have found the icon you need, you will have to add it to the project for example in the assets folder.

Register it with Angular Material – This is the interesting part. Now Angular Material provides a service MatIconRegistery to accomplish this. Now make sure inside app.module.ts we have included the MatIconModule and the HttpClientModule (needed to fetch the icons from the url safely)

@NgModule({
  ...
  imports: [
    ...
    HttpClientModule,
    MatIconModule
  ]
})
export class AppModule { }

Then inside AppComponent we can inject the MatIconRegistery service. In order to prevent XSS vulnerabilities, any SVG URLs and HTML strings passed to the MatIconRegistry must be marked as trusted by using Angular’s DomSanitizer service. Therefore additionally we also have to inject the DomSanitizer service provided by angular.

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

export class AppComponent {
  constructor(
    private matIconRegistery: MatIconRegistry,
    private domSanitizer: DomSanitizer
) { }

And register the icon as follows

 ...
constructor(
    private matIconRegistery: MatIconRegistry,
    private domSanitizer: DomSanitizer
  ) {
    this.addIcon('rocket', '/assets/rocket.svg');
  }

  addIcon(name: string, path: string) {
    this.matIconRegistery.addSvgIcon(
      name,
      this.domSanitizer.bypassSecurityTrustResourceUrl(path)
    );
  }
...

And thats it! Wasn’t it easy. Oh wait! we forgot to use the icon in the moment of excitement. Lets do it too

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

here is a more real example

<mat-list>
  <h3 mat-subheader>Items</h3>

  <mat-list-item>
    <mat-icon>computer</mat-icon>
    <h4>Computer</h4>
  </mat-list-item>

  <mat-list-item>
    <mat-icon>headset</mat-icon>
    <h4>Headset</h4>
  </mat-list-item>

  <mat-list-item>
    <mat-icon svgIcon="rocket"></mat-icon>
    <h4>Rocket</h4>
  </mat-list-item>

</mat-list>

Now you can add as many icons as you would like with this setup. As you might have already noticed, the newer icons have already got all the formatting and styles as the existing ones and they do not feel left out.