How to use Angular 2 Material in Angular 4/Angular-CLI

How to use Angular 2 Material in Angular 4/Angular-CLI:


Important note:

Due to breaking change in angular material 2, steps are changed to integrate with angular 4 cli. Below post is created with the latest updates and explained step by step. Please refer the below link.

[Updated] Adding Angular Material 2 to Angular 4 CLI

Please don’t follow from here, it wont work with latest angular material 2



Angular material is a CSS framework like bootstrap for angular projects. As both are developed by google there will be more convenient in the integration part rather than other CSS frameworks like bootstrap/foundation etc.

In order to use angular material in angular 4 you need to complete the below 5 steps process, also to note in angular 2 both angular material and animation were together, but in angular 4 angular animations has been moved to separate package. So it is mandatory to install angular animation and add its components in ngModule.


Step 1: Install angular material and angular animations

To install Angular Material:

npm install –save @angular/material


To install Angular Animations:

npm install –save @angular/animations@latest


Step 2: Import MaterialModule and BrowserAnimationsModule in ngModule

import { MaterialModule } from ‘@angular/material’;

Also in

imports: [



Step 3: Add this link for Angular Icons in index.html

<link href=”” rel=”stylesheet”>


Step 4: Add prebuilt theme in styles.css file:

@import ‘~@angular/material/prebuilt-themes/deeppurple-amber.css’;

Step 5: Add mat-app-background class to body to use angular material in index.html

<body class=”mat-app-background“>

All the steps are finished. Just for testing I added a sample button in app.components

<button md-raised-button class=”mat-primary”>


and compiled and viewed material button in the browser.

How to use Angular 2 Material in Angular 4/Angular-CLI

Feel free to write your thoughts/doubts/suggestions below.

651 total views, 3 views today

Leave a Reply

Your email address will not be published. Required fields are marked *