How to Use Material Font Icons in Angular 13?

Hi Dev,

This tutorial will provide an example of angular 13 material icons. you can see angular 13 material icons list. if you have a question about the angular 13 material icons example then I will give a simple example with a solution. let’s discuss the angular 13 material icons library.

In this tutorial, I will show you step by step how to use material icons in angular applications. we will install angular/material npm package and use google font material icons. let's follow bellow step and get an example:

So, let's see bellow example from here:

Step 1: Create New App

You can easily create your angular app using below 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. 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';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: User Google Material Icons

Here, we have to add below two css on index.html file.

Then you can use material icons. You can see full list of icons to Click Here..

index.html

<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">

Then we also need to import angular material theme css. so let's add it on styles.css file.

style.css

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

Step 5: Use Icons

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

src/app/app.component.html

<h1>Angular Material Icons Example - ItSolutionStuff.com</h1>
    
 <mat-icon>facebook</mat-icon>
 <mat-icon>home</mat-icon>
 <mat-icon>search</mat-icon>
 <mat-icon>done</mat-icon>
 <mat-icon>settings</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...