Open In App

What are angular Material Icons ?

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 22 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads