Install Material Design Icons in Angular 11

Photo on http://materialdesignblog.com/free-master-set-of-material-design-icons/

In this article, I’ll explain how to install Material Design Icons in Angular 11.

Step 1

Create new angular project using Angular CLI command:

ng new material-design-icons

Step 2

Open the project in the code editor

Step 3

Install @angular/cdk package:

npm install @angular/cdk@11.2.13 — save

Step 4

Install Material Design Icon:

npm install @mdi/font

Step 5

Update styles arrays in angular.json file:

“styles”: [

“node_modules/@mdi/font/css/materialdesignicons.min.css”,

“src/styles.scss”

],

Step 6

Replace content in app.component.html with the following material design icons to test our installation:

<div>

<span class=”mdi mdi-home-thermometer-outline”></span>

</div>

<div>

<span class=”mdi mdi-account-group-outline”></span>

</div>

<div>

<span class=”mdi mdi-account-outline”></span>

</div>

Step 7

Run application:

ng serve — o

Closing Notes

This was a basic tutorial on how to install Material Design Icons in Angular 11. If you like this article, then please share it with your friends and colleagues, and don’t forget to follow tosinoyelami on Twitter!