Angular Material 13 Icons Example Tutorial

This tutorial will help you find out the quick way of using material icons in the Angular 12 application using an angular material library.

The angular material is a flexible, profound and quintessential library that offers unbound UI components that lets you create web and mobile application quickly.

This angular material icons example will focus on implementing and using material icons in angular with its powerful <mat-icon> component.

The mat-icon directive allows you to use the icon as well as the SVG icon pattern.

Icons are the useful component for elevating the user experience; they grab the user’s attention and traverse in or outside the app properly.

For instance, if you want to take your site visitors to visit your social media page, you put your social media official icons.

Hence, for various scenarios, you have to use specific icons set, luckily angular material custom-made icons can help you integrate icons using <mat-icon> directive.

Angular Material 13 Icons Example

  • Step 1: Install Angular App
  • Step 2: Install Angular Material Library
  • Step 3: Register Mat Icon Module
  • Step 4: Use Simple Material Icon
  • Step 5: Create and Use Angular Material Custom SVG Icons
  • Step 6: Test Angular Material App

Let’s check out how to implement vector-based material icons in angular app.

Install Angular App

The first step is installing the angular app; avoid this step if it is already set up. Else, go ahead with the following command:

ng new angular-material-icons-demo

Next, move into the project root:

cd angular-material-icons-demo

Disable Strict Angular TypeStrict Errors

The latest version of Angular comes with strict mode, you have to manually disable the strict mode you can set “strict”: false, "noImplicitReturns": false and "strictTemplates": false inside the compilerOptions and angularCompilerOptions in tsconfig.json file.

Install Angular Material Library

The below step helps ascertain setting up a material library in an angular project; now, take the help of below Angular CLI’s schematic to install the angular material library.

ng add @angular/material

The above command will install the material package with CDK and angular animation. Plus, it will ask the following questions in response to adding the necessary features:

  1. Choose a prebuilt theme name or “custom” for a custom theme:

    You can choose from prebuilt material design themes or set up an extensible custom theme.

  2. Set up global Angular Material typography styles:

    Whether to apply the global typography styles to your application.

  3. Set up browser animations for Angular Material:

    Importing the BrowserAnimationsModule into your application enables Angular’s animation system. Declining this will disable most of Angular Material’s animations.

Next, add the material theme’s CSS in src/styles.scss file:

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

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

Here are the fonts and material icon css added to index.html file:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularMaterialIconsDemo</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body class="mat-typography">
  <app-root></app-root>
</body>

</html>

Register Mat Icon Module

It is always consider a good practice to make the separate locus for material library in an angular project.

Create a new file material.module.ts file in app folder.

Plus, you have to import the MatIconModule from from ‘@angular/material/icon’ module, also register in imports and exports arrays in app/material.module.ts file:

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 MaterialModule { }

In the subsequent step, you have to register the custom material module and CUSTOM_ELEMENTS_SCHEMA in the main app module; hence add the materialModule with schemas in the app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MaterialModule } from './material.module';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

export class AppModule { }

Use Simple Material Icon in Angular

You can use the simple method to add material icons in angular by placing the following icon code within the mat-icon directive.

Here is the material icons cheat sheet, where you can find tons of delightful and beautiful icons. Open and update the below code in your angular HTML template file:

<mat-icon>favorite</mat-icon>

<mat-icon>3d_rotation</mat-icon>

<mat-icon>add_task</mat-icon>

<mat-icon>account_box</mat-icon>

<mat-icon>assignment</mat-icon>

<mat-icon>aspect_ratio</mat-icon>

<mat-icon>android</mat-icon>

<mat-icon>book</mat-icon>

Create and Use Angular Material Custom SVG Icons

We will now share with you how to use custom SVG icons in an angular app with an angular material library.

For the demo purpose, let’s create and keep the user.svg inside the assets folder.

Next, import and register HttpClientModule in the app.module.ts configuration file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MaterialModule } from './material.module';
import { HttpClientModule } from "@angular/common/http";


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

export class AppModule { }

Next, we need to use the MatIconRegistry to register the custom SVG icon inside the app.component.ts file.

Ergo, Import the MatIconRegistry from “@angular/material/icon” plus also import DomSanitizer from “@angular/platform-browser”.

Now, you need to insert both the modules in the constructor method, as shown below.

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(
      "usericon",
      this.domSanitizer.bypassSecurityTrustResourceUrl("../assets/user.svg")
    );
  }

}

In the example code, the addSvgIcon method registers our custom SVG icon with the help of a two-parameter.

The first parameter declares the icon label, whereas the second parameter is the relative path url, which points to the icon’s location.

The icon path URL is a string type, thereupon to parse the string path into SafeResourceUrl, and we can take the help of the DomSanitizer module.

Test Material Custom SVG Icon

Eventually, you have successfully created a custom angular material SVG icon, and now you need to display the custom SVG icon.

Consequently, open the app.component.html file, define the mat-icon directive, svgIcon="" attribute with usericon label.

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

Type the following command on the terminal to start the angular application:

ng serve --open

Conclusion

Adding and using angular material icons in an angular app is easy.

This tutorial explained how to set up the angular app, configure the material library, use basic material icons, create custom SVG icons, and display using mat icon directive in the angular project.