How to use mat-icon in angular? Last Updated : 09 Jun, 2020 Comments Improve Suggest changes Like Article Like Report 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 <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. javascript 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: Comment More infoAdvertise with us Next Article How to use mat-icon in angular? V vaibhav19verma Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Misc Similar Reads How To Use PrimeNG Icon In Angular 17? PrimeNG is a popular UI component library for Angular applications that provides a wide range of pre-built components, including icons. With Angular 17, PrimeNG icons can be easily integrated into your project. In this article, we'll walk you through how to set up and use PrimeNG icons in your Angul 2 min read How to use Mat-Dialog in Angular ? Introduction:Angular Material is a UI component library that is developed by the Angular team to build design components for desktop and mobile web applications. In order to install it, we need to have angular installed in our project, once you have it you can enter the below command and can downloa 3 min read How To Use Bootstrap Icons In Angular? The most popular framework for making responsive and mobile-friendly websites is called Bootstrap. They include forms, typography, buttons, tables, navigation, modals, and picture carousels etc.These are built using CSS and HTML. It also supports plugins written in JavaScript. It provides the proces 3 min read How to use matTooltip in Angular Material ? Angular Material is a UI component library developed by Angular team to build design components for desktop and mobile web applications. In order to install it, we need to have angular installed in our project, once you have done it you can enter the below command and can download it. matTooltip is 2 min read How to use Angular Material in Angular 17? Angular Material is a comprehensive UI component library designed specifically for Angular applications. With its large collection of pre-built components and seamless integration with Angular, Angular Material simplifies the process of creating visually appealing and responsive user interfaces. In 2 min read How to use Icon Component in React JS? Every application requires icons for UI purposes, and integrating them with Material UI for React is seamless. Utilize the Icon Component in ReactJS effortlessly by following this straightforward approach. Prerequisites:NodeJS or NPMReact JSMaterial UISteps to create React Application And Installing 2 min read How to use <mat-divider> in Angular Material ? Angular Material is a UI component library that is developed by the Angular team to build design components for desktop and mobile web applications. In order to install it, we need to have angular installed in our project, once you have it you can enter the below command and can download it. <mat 2 min read How to use Material UI Icons ? Material UI Icons is a library that provides a collection of pre-designed icons following Google's Material Design guidelines. These icons can be easily integrated into React applications to enhance visual elements and improve user experience. Installation// Package containing Material UI icon compo 1 min read Angular Material Icons Angular Material is a UI component library that is developed by Google so that Angular developers can develop modern applications in a structured and responsive way. By using this library, we can significantly increase an end-users user experience, thereby gaining popularity for our application. Thi 5 min read Angular PrimeNG Chip Icon Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see how to use the Chips Icon in Angular PrimeNG. The Chips component sets 3 min read Like