Adding Custom Mat Icons in Angular!

Have you ever wanted an icon that is not included in the Material Icons Google Fonts page? Well look no further because in this post I will show you how to use custom Mat Icons for your Angular applications!

Figure 1: Here’s a list of icons that are not official supported by Angular Material

Setup

First we need to make sure the @angular/material library in install in your Angular application. If not, install it by running: npm install @angular/material --save.

Next, we need to add the MatIconModule to the imports array of our app.module.ts file like so:

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

@NgModule({

  ...
  imports: [
    ...
    MatIconModule
  ],
  ...

Now comes the fun part: pick a custom icon that you want to add to your Angular project and add it to your {project_name}/src/assets/icons folder. Note: Make sure the icon file is in .svg file format.

After this, we need to import the MatIconRegistry and DomSanitizer library in our AppComponent. So let’s do that now:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy {
  constructor(
    ...,
    private matIconRegistry: MatIconRegistry,
    private domSanitzer: DomSanitizer,
  ){
    this.matIconRegistry.addSvgIcon(
      '<icon_label>',
      this.domSanitzer.bypassSecurityTrustResourceUrl('assets/icons/<icon_file_name>.svg')
    );
  }

Note: make sure to replace the <icon_label> and <icon_file_name> fields with the label you’d like for your icon and the correct file name for that icon, respectively.

Finally, all that’s left to do is to add the <mat-icon svgIcon="<icon_label>"></mat-icon> to whichever template file that needs this icon, like so:

Figure 2: Custom Mat Icon in template file

Just navigate to this component’s url in the browser to view your custom Mat Icon!

Conclusion

Well, that’s it for this tutorial! If you have any questions or concerns please feel free to post a comment for this article and I will get back to you if I find the time.

I hope you found this article helpful. Thanks so much for reading my article! Feel free to follow me on Twitter and GitHub, connect with me on LinkedIn and subscribe to my YouTube channel.