How to Use Custom Svg Icons in Angular Material?

In this example, I will show you how to use custom svg icons in angular material. we will help you to give example of angular material custom svg icon. step by step explain angular material mat icon custom svg. if you want to see example of angular material mat-icon svgicon then you are a right place. you will do the following things for how to use custom svg icons in angular material ui design.

You can use this example in angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 versions.

Here, we will set one svg image as icons in angular material design. we will download on svg image and put into asset folder then we will use as icon. so let's follow below step and see very simple example.

So, let's see bellow example from here:

Step 1: Create New App

You can easily create your angular app using bellow command:

ng new myApp

Step 2: Add Material Design

Now in this step, we need to just install material design theme in our angular application. so let's add as like bellow:

ng add @angular/material

Cmd like bellow:

Installing packages for tooling via npm.
Installed packages for tooling via npm.
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink     
   [ Preview: https://material.angular.io?theme=indigo-pink ]
? Set up HammerJS for gesture recognition? Yes
? Set up browser animations for Angular Material? Yes

Step 3: Import Module

In third step, we need to import MatIconModule and HttpClientModule. so let's add.

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
import {MatIconModule} from '@angular/material/icon';
import { HttpClientModule } from "@angular/common/http";
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatIconModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Update Ts File

Here, you need svg icon call "applause.svg" and download from Here. Put that svg image on "assets" folder.

Copy bellow code and paste in your ts file.

src/app/app.component.ts

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 {
  title = 'app-material2';
    
  /*------------------------------------------
  --------------------------------------------
  Defined constructor
  --------------------------------------------
  --------------------------------------------*/
  constructor(
        private matIconRegistry: MatIconRegistry,
        private domSanitizer: DomSanitizer
      ) {
      this.matIconRegistry.addSvgIcon(
        "applause",
        this.domSanitizer.bypassSecurityTrustResourceUrl("../assets/applause.svg")
      );
  }
}

Step 5: Update HTML

Now in view file, we will add custom material icons as like bellow:

src/app/app.component.html

<h1>Angular Material Icon - Set Custom Icon - ItSolutionStuff.com</h1>
    
<mat-icon svgIcon="applause"></mat-icon>

Run Angular App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Angular app:

ng serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:4200

you will see layout as bellow:

I hope it can help you...