Skip to content
Related Articles

Related Articles

What are angular Material Icons ?

View Discussion
Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 22 Mar, 2022
View Discussion
Improve Article
Save Article

Angular Material is a UI component library which is developed by Google so that Angular developers can develop modern applications in a structured and responsive way. By making use of this library, we can greatly increase the user experience of an end-user thereby gaining popularity for our application. This library contains modern ready-to-use elements which can be directly used with minimum or no extra code.

The <mat-icon> is a container for icons that makes it easier to use vector-based icons in Angular applications. Angular Material Icons are a set of prebuilt icons that can be easily imported into the app. Except for the bitmap-based formats ie., png, jpg, etc, this directive can support both icon fonts and SVG icons.

Syntax:

<mat-icon> Icon Name </mat-icon>

Installation Syntax:

The basic pre-requisite is that we must have Angular CLI installed on the system in order to add and configure the Angular material library. After satisfying the required condition, we can type the following command on the Angular CLI:

ng add @angular/material

Please refer to the Adding Angular Material Component to Angular Application article for the detailed installation procedure.

Adding the Icon Component:

To use the Icon component, we need to import it into the module.ts file. 

import {MatIconModule} from '@angular/material/icon';

Similarly, in order to use the SVG in the Angular app, we need to import it into the module.ts file.

import { HttpClientModule } from '@angular/common/http';

Then, we need to add these components into our imports array. After this, we can use it in our code.

Project Structure:

After successful installation, the project structure will look like the following image:

Project Structure

Example 1: The below example illustrates the implementation of the Angular Material Icons.

app.component.html




<h2>GeeksforGeeks</h2>
<h4>Angular Material Icons</h4>
<h5>Rounded Shaped Icons</h5>
<mat-icon>
  <span class="material-icons-round"> home </span>
  <span class="material-icons-round"> settings </span>
  <span class="material-icons-round"> touch_app </span>
</mat-icon>
<h5>Outlined Shaped Icons</h5>
<mat-icon>
  <span class="material-icons-outlined"> account_circle </span>
  <span class="material-icons-outlined"> delete </span>
  <span class="material-icons-outlined"> thumb_up </span>
</mat-icon>
<h5>Filled Shaped Icons</h5>
<mat-icon>
  <span class="material-icons"> help </span>
  <span class="material-icons"> question_answer </span>
  <span class="material-icons"> history </span>
</mat-icon>


app.component.ts




import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {}


app.module.ts




import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
  
import { AppComponent } from './app.component';
import { MatIconModule } from '@angular/material/icon';
  
@NgModule({
  imports: [BrowserModule, FormsModule, MatIconModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}


Output:

Angular Material Icons

Example 2: This example illustrates the Angular Material Icons where the SVG icons are used.

app.component.html




<h2>GeeksforGeeks</h2>
<h4>Angular Material Icons</h4>
<h5>SVG Icons</h5>
<label>Search</label>
<mat-icon svgIcon="search"></mat-icon>


app.component.ts




import { Component } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
import { MatIconRegistry } from "@angular/material/icon";
  
const searchIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d=
"M18.125,15.804l-4.038-4.037c0.675-1.079,1.012-2.308,1.01-3.534C15.089,4.62,12.199,
1.75,8.584,1.75C4.815,1.75,1.982,4.726,2,8.286c0.021,3.577,2.908,6.549,6.578,
6.549c1.241,0,2.417-0.347,3.44-0.985l4.032,4.026c0.167,0.166,0.43,0.166,0.596,
0l1.479-1.478C18.292,16.234,18.292,15.968,18.125,15.804 M8.578,13.99c-3.198,
0-5.716-2.593-5.733-5.71c-0.017-3.084,2.438-5.686,5.74-5.686c3.197,0,5.625,2.493,
5.64,5.624C14.242,11.548,11.621,13.99,8.578,13.99 M16.349,
16.981l-3.637-3.635c0.131-0.11,0.721-0.695,0.876-0.884l3.642,3.639L16.349,16.981z"/>
  </svg>
`;
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIconLiteral(
      "search",
      sanitizer.bypassSecurityTrustHtml(searchIcon)
    );
  }
}


app.module.ts




import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
  
import { AppComponent } from "./app.component";
import { MatIconModule } from "@angular/material/icon";
import { HttpClientModule } from "@angular/common/http";
  
@NgModule({
  imports: 
      [BrowserModule, 
     FormsModule, 
     MatIconModule, 
     HttpClientModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}


Output:

Angular Material Icons

Reference: https://material.angular.io/components/icon/overview


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!