Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

How to use mat-icon in angular?

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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=”” 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:


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.


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

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

<html lang="en">
  <meta charset="utf-8">
  <!--font library is loaded prior to using mat-icons-->
  <link href=

Now use mat-icon as buttons.

import { Component } from '@angular/core';
  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 {


My Personal Notes arrow_drop_up
Last Updated : 09 Jun, 2020
Like Article
Save Article
Similar Reads
Related Tutorials