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:
- 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 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.
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:
Please Login to comment...