How to use mat-icon in angular?

To include icons in your webpage, you can use mat-icon directive. Previously it was known as md-icon. It is better to use mat-icon as they serve SVG icons i.e. vector-based icons which are adaptable to any resolution and dimension, on the other hand, raster-based icons have a fixed pattern of dots with specified values and if resized, the resolution changes.

Approach:

First of all we have to load the font library in your HTML file using the following syntax:

<link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”>
Now import MatIconModule in the ngmodule.ts file by using this command:
```
import {MatIconModule} from '@angular/material/icon';
```
Use the following command to display an icon:
```
<mat-icon>icon-name</mat-icon>
```

You can change the color of the icons as per the requirement:

Primary .
Accent.
Warn.

These icon may be used as buttons or may convey some message such as type of form field, status, etc.

Example:

Using mat-icon let’s create three different buttons.

In your index.html file, load the font library.

<html lang="en"> 

<head> 

  <meta charset="utf-8"> 

  <title>Tutorial</title> 

  <!--font library is loaded prior to using mat-icons-->

  <link href= 

"https://fonts.googleapis.com/icon?family=Material+Icons&display=block" 

        rel="stylesheet"> 

</head> 

<body> 

  <app-child></app-child> 

</body> 

</html>

Now use mat-icon as buttons.

import { Component } from '@angular/core'; 

@Component({ 

  selector: 'app-child', 

  template: ` 

  <button ><mat-icon color = "primary">check</mat-icon></button> 

  <button ><mat-icon color = "accent">check</mat-icon></button> 

  <button ><mat-icon color = "warn">check</mat-icon></button> 

  `, 

  styleUrls: [] 
}) 
export class childComponent { 

}

Output:

Article Tags :

AngularJS

Web Technologies

AngularJS-Misc