Use npm to install material, cdk and animations.

@angular/material contains the material components.

@angular/cdk has predefined behaviour for components, like overlay for menus and popups, table behaviour and others.

@angular/animations contains animation (what else?) and it will use Web Animations API if supported by the browser or fallback to css.

npm install @angular/material @angular/cdk @angular/animations --save


Create a new file src/app/material.module.ts where we will centralize all material related imports

import {NgModule} from '@angular/core';

  imports: [],
  exports: []
export class MaterialModule {}

Open app.module.ts and import animations and MaterialModule

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';
imports: [

Add one of the four predefined themes

  • deeppurple-amber.css
  • indigo-pink.css
  • pink-bluegrey.css
  • purple-green.css

Open styles.css

/* You can add global styles to this file, and also import other style files */
@import '[email protected]/material/prebuilt-themes/deeppurple-amber.css';

Add Material Icons, open index.html and add the font

<link href="" rel="stylesheet">

Test the application

ng serve

Open material.module.ts and imports for some components

import { NgModule } from '@angular/core';
import {
} from '@angular/material';

  imports: [MatSidenavModule, MatToolbarModule, MatIconModule, MatListModule],
  exports: [MatSidenavModule, MatToolbarModule, MatIconModule, MatListModule]
export class MaterialModule {}

Open app.component.html and add a toolbar and change the list of items loaded from Firebase

<mat-toolbar color="primary">
    <span class="toolbar-spacer"></span>
    <mat-icon class="toolbar-icon">mail_outline</mat-icon>
    <mat-icon class="toolbar-icon">account_box</mat-icon>

  <mat-list-item *ngFor="let item of items | async">
    <mat-icon matListIcon>done</mat-icon>
    <h3 matLine> {{}} </h3>

Open app.component.css and add some styling

.toolbar-icon {
  padding: 0 14px;

.toolbar-spacer {
  flex: 1 1 auto;

.mat-list-icon {
  color: rgba(0, 0, 0, 0.54);

Test the application.