Angular Material 8/9 Icons Tutorial with Real-world Examples

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

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