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.

• 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:

1. Primary .
2. Accent.
3. 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.

Now use mat-icon as buttons.

Output: