Angular Material 16 Icons Examples Tutorial

Last updated on: September 16, 2023 by Digamber

Angular Material Icons

Nowadays, the usage of Angular material design is rapidly increasing. Angular material offers lots of robust and beautiful UI components to build the user interface seamlessly.

In this tutorial, I will teach how to use Angular Material icons in your Angular project.

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 apps.

Angular Material 16 Icons Examples

To work with Angular material icons, first setup angular project and angular material ui library, follow the given below process.

Install and setup Angular project
Install and setup Angular Material UI library
Create Custom SVG Icons with Angular Material MatIconRegistry Service

Create Angular Project

We have to install and setup Angular project to display the Angular Material icons.

Execute 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

Install and Setup Angular Material UI library

To set up angular material ui library, run 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 ]

Select Yes for including Angular Material Typography and Animations packages.

# ? Set up global Angular Material typography styles? Yes
# ? Set up browser animations for Angular Material? Yes

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 { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
const materialModules = [
  MatIconModule
];
@NgModule({
  imports: [
    CommonModule,
    ...materialModules
  ],
  exports: [
    ...materialModules
  ],
})
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>

Head over to app.module.ts file and import the AngularMaterialModule.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AngularMaterialModule } from './material.module';

@NgModule({
  declarations: [...],
  imports: [
    BrowserAnimationsModule,
    AngularMaterialModule,
  ],
  providers: [...],
  bootstrap: [...],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

Angular material offers plenty of icons, to check out the full list of Angular material icons here.

Create Custom SVG Icons with Angular Material MatIconRegistry Service

Suppose if you require to use custom svg icon in your angular 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.ts file and import the MatIconRegistry and place the icon registration service within your 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.scss']
})
export class AppComponent {
  
  constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
  ) {
    this.matIconRegistry.addSvgIcon(
      "musicon",
      this.domSanitizer.bypassSecurityTrustResourceUrl("../assets/headphone.svg")
    );
  }
}

Download the Headphone SVG file.

Next, keep this headphone.svg file inside the assets/ folder.

Finally, we’ve setup the required services to create custom SVG icons in Angular using the Angular material environment.

The final step is to use the icon in 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

Conclusion

Angular Material is a widely popular UI component library especially built for Angular applications.

It offers eye-catching, handy pre-built and customizable UI components, including buttons, cards, forms, and more.

Angular Material Icons are a part of this useful library and allow you to frontend developers to incorporate icons into Angular based application.

Angular Material icons tutorial is completed. Thanks for reading, have a good day!

Digamber

A Full-stack developer with a passion to solve real world problems through functional programming.