Introduction
The Angular Material library offers a suite of Angular components styled with Material Design. One such component is the <mat-icon> component. There are a wide range of ready-made Material icons. But what if we want to display some custom icons while staying consistent with the Material Design styling? Let’s learn how to use our own SVG icons in Angular Material components.
In this tutorial, you will use the <mat-icon> component to use the standard Material Icons font. Then, you will use the <mat-icon> component to support a custom SVG icon.
The full working code can be found on this GitHub repo.
Prerequisites
To complete this tutorial, you will need:
Node.js installed locally, which you can do by following How to Install Node.js and Create a Local Development Environment.
This post assumes you have some basic knowledge of Angular v4.2+.
This tutorial was originally written with Angular v5.2+ and Angular Material v5.2.4.
This tutorial was verified with Angular v10.0.5 and Angular Material v10.1.1.
You can refer to this post if you’re getting started with Angular Material.
Step 1 — Creating an Angular Project and Installing Dependencies
First, open your terminal and create a new project directory:
mkdir angular-material-custom-svg
Next, navigate to the new directory:
cd angular-material-custom-svg
Then, use npm to install Angular CLI as a devDependency:
npm install @angular/cli@10.0.4 --save-dev
Now, you can use Angular CLI to create a new Angular project and also set some options for the needs of this tutorial:
ng new angular-material-custom-svg --directory=. --skipTests=true --routing=false --style=css
This gives you a fresh Angular project in the current directory. Let’s install Angular Material and its dependencies with the following command:
npm install @angular/material@10.1.1 @angular/cdk@10.1.1 --save
That concludes setting up the tutorial project. We can now continue on to using Material icons in our project.
Step 2 — Using <mat-icon> with Icon Fonts
In order to use the default Material Icons, you’ll need to first import them in the global stylesheet. To do this, open the styles.css file (that was generated by Angular CLI):
nano src/styles.css
Replace the contents of the file with the following import statement:
src/style.css
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
Next, you will need to import MatIconModule. Open the app.module.ts file:
nano src/app.module.ts
Then, add the import for MatIconModule:
src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatIconModule } from "@angular/material/icon";
And add it to the module’s array of imports:
src/app/app.module.ts
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
MatIconModule
],
providers: [],
bootstrap: [AppComponent]
})
Now, you can use the built-in material icons with the <mat-icon> component. If you add the textual name for an icon, it will display the associated icon glyph.
For our tutorial, we will be adding the "mood" icon (this resembles the symbol of a face with a smile):
The Material Design website has a full list of Material icons which you can use directly.
Open the app.component.html file:
nano src/app/app.component.html
Replace the contents of the file with the following line of code:
src/app/app.component.html
<mat-icon>mood</mat-icon>
Let’s take a look at what we have so far! Start the application:
ng serve
View the application in your web browser (localhost:4200), and you will see the "mood" icon.
That concludes using <mat-icon> to display icon fonts. We can continue on to using <mat-icon> to display SVGs.
Step 3 — Using <mat-icon> with SVGs
Let’s add a custom "unicorn" icon to our project.
Note: It is possible to acquire unicorn SVG icons at The Noun Project. Free basic usage must attribute the creator of the icon per license requirements.
Save the icon as unicorn_icon.svg to the src/assets folder of your project.
To use our custom unicorn icon with the <mat-icon> component tag, we’ll need to import HttpClientModule.
Open the app.module.ts file:
nano src/app/app.module.ts
Then, add the import for HttpClientModule:
src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatIconModule } from "@angular/material/icon";
import { HttpClientModule } from "@angular/common/http";
And add it to the module’s array of imports:
src/app/app.module.ts
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
MatIconModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
Now, we can register our custom "unicorn" icon with the MatIconRegistry service provided by Angular Material.
Open app.component.ts:
nano src/app/app.component.ts
Then, add the import for MatIconRegistry:
src/app/app.component.ts
import { Component } from "@angular/core";
import { MatIconRegistry } from "@angular/material/icon";
And add the injection of the service into the component:
src/app/app.component.ts
export class AppComponent{
constructor(private matIconRegistry: MatIconRegistry){
// ...
}
}
Add the addSvgIcon method to the component’s constructor method:
src/app/app.component.ts
export class AppComponent{
constructor(private matIconRegistry: MatIconRegistry){
this.matIconRegistry.addSvgIcon(
`icon_label`,
`path_to_custom_icon.svg`
);
}
}
The addSvgIcon method registers our icon by taking in two arguments.
The first argument is the icon label, which is of type string.
The second argument is the relative URL path pointing to the location of the icon file.
This URL path string is of type SafeResourceUrl. To parse the URL path string into SafeResourceUrl, we can make use of the DomSanitizer provided by Angular.
Next, add the import for DomSanitizer:
src/app/app.component.ts
import { Component } from "@angular/core";
import { MatIconRegistry } from "@angular/material/icon";
import { DomSanitizer } from "@angular/platform-browser";
And add the injection of the service into the component:
src/app/app.component.ts
export class AppComponent{
constructor(
private matIconRegistry: MatIconRegistry,
private domSanitizer: DomSanitizer
){
this.matIconRegistry.addSvgIcon(
`icon_label`,
`path_to_custom_icon.svg`
);
}
}
Given a relative URL path string, the bypassSecurityTrustResourceUrl method on DomSanitizer will return a safe resource URL, which is required by the addSvgIcon method.
Now, you can replaceicon_label with the custom "unicorn" label. And path_to_custom_icon.svg with the custom "unicorn_icon.svg" icon.
Let’s update the lines in addSvgIcon:
src/app/app.component.ts
export class AppComponent{
constructor(
private matIconRegistry: MatIconRegistry,
private domSanitizer: DomSanitizer
){
this.matIconRegistry.addSvgIcon(
"unicorn",
this.domSanitizer.bypassSecurityTrustResourceUrl("../assets/unicorn_icon.svg")
);
}
}
Now, the custom "unicorn" icon is properly registered with the MatIconRegistry service.
To display the custom icon, you will need to update the component’s template. Open app.component.html:
nano src/app/app.component.html
And pass the icon label to the svgIcon input property of <mat-icon>:
src/app/app.component.html
<mat-icon svgIcon="unicorn"></mat-icon>
Let’s take a look at what you have so far! Start the application:
ng serve
View the application in your web browser (localhost:4200), and you will see that the custom icon is displayed with Material styling.
Now, you’re able to display a full set of custom icons in your apps with Material styling.
To make the code cleaner and more maintainable, we can refactor the code by moving the MatIconRegistry into a service class.
Conclusion
In this tutorial, you have completed an initial exploration into using Angular Material’s <mat-icon> component with the Material Icons font and custom SVGs. This provides a way to maintain consistent adherence to Material Design styling throughout your application.
If you’d like to learn more about Angular, check out our Angular topic page for exercises and programming projects.
If you’d like to learn more about Material Design, check out the official documentation.
