How to Use Material Font Icons in Angular 13 ?

Today now in this post i will show you How to Use Material Font Icons in Angular 13 ? Here in this tutorial i will provide an example of angular 13 material icons. we can see angular 13 material icons list. If you have any question about the angular 13 material icons example then. Here I will give a very simple example with a solution. So let’s discuss the angular 13 material icons library.

Now in this tutorial, i will show you an example step by step how to use material icons in angular applications. We can install angular/material npm package and then use google font material icons. So let’s follow the bellow step and get an example:

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

Step 1: Create New App

We can easily create our angular application by using the below 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 need to add as like bellow:

ng add @angular/material

Cmd will be like as 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, we have to import MatIconModule. 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';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: User Google Material Icons

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

Then we can use material icons. we 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 you 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 the view file, i will add the few material icons as like as 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 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

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →