Angular Material 8/9 Icons Tutorial with Real-world Examples
We’ll learn to use <mat-icon>
material design component to display fonts icon and SVG icons. This material design ui component helps us to implement vector-based Angular material icons in angular 8/9 apps.
Angular Material 8 Icons Tutorial with Real-world Examples
To work with Angular material icons, first setup angular project and angular material ui library, follow the given below process.
Table of contents
#1 – Install and setup Angular 8/9 project
We have to install and setup angualr 8 project to display the Angular material 8 icons. Enter the following command.
ng new angular-material8-icons-tutorial
Answer the questions:
# ? Would you like to add Angular routing? = No
# ? Which stylesheet format would you like to use? = CSS
Go to the Angular project folder.
cd angular-material8-icons-tutorial
#2 – Install and setup Angular Material 8 ui library
To set up angular material 8 ui library, enter the following command.
ng add @angular/material
Select the Angular material theme from the given options:
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink
❯ Indigo/Pink [ Preview: https://material.angular.io?theme=indigo-pink ]
Deep Purple/Amber [ Preview: https://material.angular.io?theme=deeppurple-amber ]
Pink/Blue Grey [ Preview: https://material.angular.io?theme=pink-bluegrey ]
Purple/Green [ Preview: https://material.angular.io?theme=purple-green ]
It will ask for Hammer.js (Gesture recognition support) and Angular browser animation support.
Set up HammerJS for gesture recognition? (Y/n) = Y
? Set up browser animations for Angular Material? (Y/n) = Y
Importing MatIconModule in Separate Angular Material Module
We’ve installed the Angular material UI library in Angular project. I would suggest to create a specific angular-material.module.ts
file to manage angular material components.
import { NgModule } from '@angular/core';
import { MatIconModule } from '@angular/material';
@NgModule({
imports: [
MatIconModule
],
exports: [
MatIconModule
]
})
export class AngularMaterialModule { }
Now we can can use angular material icons in our angular app. We just have to declare the <mat-icon>
directive in our app to create the vector based material design icons.
Go to app.component.html
file and include the code like given below.
<div style="text-align:center">
<h1>
<mat-icon>favorite_border</mat-icon>
Hello World
<mat-icon>favorite_border</mat-icon>
</h1>
</div>
Visit app.module.ts
file and import the AngularMaterialModule
.
/* Angular material */
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AngularMaterialModule } from './material.module';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
declarations: [...],
imports: [
BrowserAnimationsModule,
AngularMaterialModule,
],
providers: [...],
bootstrap: [...],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
To import the angular material theme, include the given below code to your src > index.html
file.
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Go to src > styles.css
file and add the following code.
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
Now we are done with installing and setting up angular and angular material library. You can type the below command in terminal to run the angular project.
ng serve --open
Angular material 8 offers plenty of icons, to check out the full list of Angular material icons here.
#3 – Create Custom SVG Icons with Angular Material 8 MatIconRegistry Service
Suppose if you require to use custom svg icon in your angular 8/9 project. Keep your custom svg icon headphone.svg
in your assets folder.
In order to work with custom icons with angular material <mat-icon>
directive, we must import HttpClientModule in app.module.ts
file.
import { HttpClientModule } from "@angular/common/http";
@NgModule({
imports: [
HttpClientModule
]
})
export class AppModule {}
After that we are ready to register custom SVG icons with MatIconRegistry
angular material service.
Go to app.component.html
file and import the MatIconRegistry
and place the icon registration service within your angular 8/9 component’s constructor method.
It takes 2 parameters, the 1st parameter is the icon’s label, and it should be a string type. Our 2nd parameter is the icons location path pointing towards the icon and its a SafeResourceUrl
type. We need to import the DomSanitizer
service to parse the url string path into SafeResourceUrl.
import { Component } from '@angular/core';
import { MatIconRegistry } from "@angular/material/icon";
import { DomSanitizer } from "@angular/platform-browser";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(
private matIconRegistry: MatIconRegistry,
private domSanitizer: DomSanitizer
) {
this.matIconRegistry.addSvgIcon(
"musicon",
this.domSanitizer.bypassSecurityTrustResourceUrl("../assets/headphone.svg")
);
}
}
Finally, we’ve setup the required services to create custom SVG icons within our Angular 8/9 app using Angular material 8 ui library.
The final step is to use the `headphone.svg`
icon in app.component.html
file.
<mat-icon svgIcon="musicon"></mat-icon>
Now you can display custom svg icon in your app using MatIconRegistry
service.
ng serve --open
Angular Material 8/9 icons tutoriall is completed now, i hope you must have loved it. Thanks for reading, have a good day!
Thanks for checking this tutorial out :) Let me know if you have any suggestions or issue related to this tutorial, or you want to request a new tutorial. Just shoot me a mail here.