Angular Material 13 Icons Examples 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.

/* 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 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 styles.css file and add the following code.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Angular material 8/9/10 offers plenty of icons, to check out the full list of Angular material icons here.

import { HttpClientModule } from "@angular/common/http";

@NgModule({
  imports: [
    HttpClientModule
  ]
})

export class AppModule {}

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")
    );
  }

}

<mat-icon svgIcon="musicon"></mat-icon>

ng serve --open