Angular Material Icons

In this lecture let's take a look at the simplest way to use angular material icons.

Setting up angular material icon module

First make sure a link to material icons in your index.html.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Next import the MatIconModule from a@angular/module and add it to the MaterialComponents array in material.module.ts file just like this bellow.

import { NgModule } from "@angular/core";
import { MatButtonModule, MatButtonToggleModule, MatIconModule } from "@angular/material";

const MaterialComponents = [MatButtonModule, MatButtonToggleModule, MatIconModule];

@NgModule({
  imports: [MaterialComponents],
  exports: [MaterialComponents]
})
export class MaterialModule {}

By including MatIconModule we can now use the <mat-icon></mat-icon> in your html files, in between the opening and closing tags we need to specify text that corresponds to an icon but the question is what text do we specify, the <mat-icon></mat-icon> component accepts material fonts so in the browser go to the official website of material icons and there you can find all the material fonts available. angular material icon list

If you want to use a specific icon you simply have to grab the text bellow the icon and put it in between the opening and closing tags for <mat-icon>accessibility</mat-icon>. if now go back to the browser you should see the icon being displayed, so you can select any icon from the list and just include the text mat-icon component. angular material icon

Change the color of angular material icon

To add the color use the color attribute with either primary, accent or warn as a value which is retrieved based on your theme.

<mat-icon color="primary">accessibility</mat-icon>
<mat-icon color="accent">accessibility</mat-icon>
<mat-icon color="warn">accessibility</mat-icon>

angular material icon color

Using SVG icons in angular

You can also use your own SVGs and there is a detailed explanation on how to use theme as well so if you go to the angular material icon docs over there is a good amount of explanation on using SVGs but then again material font has tons of icons which might be more then enough.