How to use mat-icon in angular?

Last Updated : 09 Jun, 2020

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

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

javascript

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 {

}