Home AngularJs How to Use Custom Svg Icons in Angular Material ?

How to Use Custom Svg Icons in Angular Material ?

by Shahriar Sagor

Today now in this post i will show How to Use Custom Svg Icons in Angular Material? Here in this example, I will teach you how we can use custom svg icons in angular material. So now i will help you and give an example of angular material custom svg icon. Here just need to follow step by step explain angular material mat icon custom svg. If you want to see an example of angular material mat-icon svgicon then here is the right place. You can do this the following things for how to use custom svg icons in angular material ui design.

We can also use this example in any version angular 8, angular 9, angular 10, angular 11, angular 12 and angular 13 versions.

Here, i will set one svg image as icons in the angular material design. I will download on svg image and then put into asset folder then i will use this as icon.

so let’s follow below the step and see a very simple example.

So, let’s start and see the bellow example from here:

Step 1: Create New App

we can easily create our angular app by using bellow command:

ng new myApp
Step 2: Add Material Design

Now in this step, i have to just install the material design theme in our angular application. So let’s add as like bellow:

ng add @angular/material

Cmd will be 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 the third step, i have to import MatIconModule and HttpClientModule. so let’s add this .

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, i have to svg icon call “applause.svg” and then download from website. Put that svg image on “assets” folder.

Just need to 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 the view file, i will add the custom material icons as like as bellow:

src/app/app.component.html

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

Run Angular App:

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

ng serve

Read Also: How To Implement Laravel 9 form validation ?

Thanks for read. I hope it help you. For more you can follow us on facebook

close

You may also like