reference: https://material.angular.io/

While in your project folder

npm install –save @angular/material @angular/cdk

Some Material components depend on the Angular animations module in order to be able to do more advanced transitions. If you want these animations to work in your app, you have to install the @angular/animations module and include the BrowserAnimationsModule in your app.
NPM

npm install –save @angular/animations

Import the component modules

In app.component.ts import the NgModule for each component you want to use:

import {MatButtonModule, MatCheckboxModule} from ‘@angular/material’;

@NgModule({
…
imports: [MatButtonModule, MatCheckboxModule],
…
})
export class PizzaPartyAppModule { }

Alternatively, you can create a separate NgModule that imports all of the Angular Material components that you will use in your application. You can then include this module wherever you’d like to use the components.

import {MatButtonModule, MatCheckboxModule} from ‘@angular/material’;

@NgModule({
imports: [MatButtonModule, MatCheckboxModule],
exports: [MatButtonModule, MatCheckboxModule],
})
export class MyOwnCustomMaterialModule { }

Whichever approach you use, be sure to import the Angular Material modules after Angular’s BrowserModule, as the import order matters for NgModules.

Include a theme

Including a theme is required to apply all of the core and theme styles to your application.

To get started with a prebuilt theme, include one of Angular Material’s prebuilt themes globally in your application. If you’re using the Angular CLI, you can add this to your styles.css:

@import “~@angular/material/prebuilt-themes/indigo-pink.css”;

Gesture Support

Some components (mat-slide-toggle, mat-slider, matTooltip) rely on HammerJS for gestures. In order to get the full feature-set of these components, HammerJS must be loaded into the application.

You can add HammerJS to your application via npm, a CDN (such as the Google CDN), or served directly from your app.

To install via npm, use the following command:

npm install –save hammerjs

After installing, import it on your app’s entry point (e.g. src/main.ts).

import ‘hammerjs’;

Add Material Icons

If you want to use the mat-icon component with the official Material Design Icons, load the icon font in your index.html.

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