Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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:

  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.




<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tutorial</title>
    
  <!--font library is loaded prior to using mat-icons-->
    
  <link href=
        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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!