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:

  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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Now use mat-icon as buttons.

filter_none

edit
close

play_arrow

link
brightness_4
code

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 {
  
}

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.