Angular Material Icons Example Tutorial

In this post, we will learn angular material icons. We will look at examples of angular material icons list. you can see angular material icons for example. This article goes in detail on angular material icons library. Alright, let’s dive into the steps.

You can use this example in angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 versions.

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 the 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 bellow 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...