How to List of All Mat Icons in Angular

1. Material Design Icons DX in Angular
2. Angular Material Icons Provided by Google

We will introduce websites where we can find all the mat icons in Angular and methods to use those mat icons in Angular projects.

Material Design Icons DX in Angular

Material design icons DX is a ~fork of Google’s material design icons where you can find more than 900 material icons. This project was created to fix development experience issues.

There are two ways to install material design icons in your project.

To install using npm:

npm install material-design-icons-iconfont --save

To include or @import the precompiled CSS file:

<link href=".../material-design-icons.css" rel="stylesheet">

Usage

Using scss, you can import fonts and variables in your project.

$material-design-icons-font-directory-path: '~material-design-icons-iconfont/dist/fonts/';

@import '~material-design-icons-iconfont/src/material-design-icons';

Customizing Classes

We can customize our classes and access material variable with Sass mixins.

.my-home {
  @include material-icon('home');
}
# or
.my-home:before {
  content: material-icons-content('home');
}

A list of icons can be found here.

Angular Material Icons Provided by Google

Material design system icons by Google are easy to use for any project, and there are 900+ material icons. <mat-icon> selector displays material icons in Angular. <mat-icon> is a part of an Angular material module called MatIconModule.

We can use font ligature as an icon by putting the ligature text in the <mat-icon> component.

Example:

<mat-icon>home</mat-icon>

We have to import MatIconModule from Angular material modules.

import {MatIconModule} from '@angular/material/icon'

A list of icons can be found here.