How to add material design icons on Angular 11

Hi guys as always i have a TLDR section so that people don’t have to deal with my sob story of the week. These are just my personal notes that I’ll go back to as to when I want to add material design icons to my project.

So, I have seen this before and of course there are a number of options as to how to install material design icons for your angular project, this is the solution that worked for me on my personal project.

TLDR
please note, if you have a project already built be sure to delete your node_modules in case of any problems.

// use this command in gitbash
npm install --save @angular/material && @angular/cdk && material-design-icons

This would be my first step the npm site has good documentation on how to set everything up but i’ll just continue on what i did next.

Add the following link in you index.html file

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

Now you’ll need to do some imports to your app.module.component.ts file it should look something like this.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// Material stuff
import { MatIconModule } from '@angular/material/icon';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, BrowserAnimationsModule, MatIconModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

I just added a basic material icon examples here for the view app.component.html.

<div class="container">
    <h2>Material icon samples</h2>
    <span class="material-icons">face</span>
    <i class="material-icons">visibility</i>
    <mat-icon>home</mat-icon>
</div>

That should be it, I have a repo that has the material design’s icon on an Angular 11 project so it should be straight forward to compare. Have a great weekend!

POST EDIT
I came across an issue when following my step, if you have any compiling issue after setting up the icons run this command to install this version of material icons

npm i @angular/material@11.2.13

stackoverflow: solution here