1.引入material npm包

npm install @angular/material @angular/cdk

2.新建一個ebiz-material.module.ts方便管理引入material的module

ng g module ebiz-material -app=ebiz-ui

3.在app的根module中引入ebiz-material.module.ts

import { EbizMaterialModule } from './ebiz-material/ebiz-material.module';@NgModule({  imports: [..., EbizMaterialModule],  declarations: [    ...  ],  schemas: [CUSTOM_ELEMENTS_SCHEMA]})

使用material組件

1.首先在ebiz-material.module.ts中引入material組件的module，例如我們要用到checkbox

(https://material.angular.io/components/checkbox/overview)，那就引入MatCheckboxModule，引入之后再exports。

import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import { MatCheckboxModule } from '@angular/material';@NgModule({ imports: [CommonModule, MatCheckboxModule], declarations: [], exports: [ MatCheckboxModule ]})export class EbizMaterialModule { }

2.在html文件中使用組件

<mat-checkbox [(ngModel)]="checked">Check me!</mat-checkbox>

使用material-icon

1.引入material-icon

npm install material-design-icons

如果下載失敗（我是install失敗了，也不去管它了，能用就行），可以到 github上 下載下來，然后取出iconfont文件夾放到自己的項目目錄下，并且在需要用到圖標的css(scss)中引入,一般情況我們會放在style.scss中全局去使用。

@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(assets/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */ src: local('Material Icons'),    local('MaterialIcons-Regular'),    url(assets/iconfont/MaterialIcons-Regular.woff2) format('woff2'),    url(assets/iconfont/MaterialIcons-Regular.woff) format('woff'),    url(assets/iconfont/MaterialIcons-Regular.ttf) format('truetype');}/* meterial icon的設定 */.material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga';}

2.在html的適當位置放上圖標

<i class="material-icon">iconName<i>

使用material內置theme以及自定義theme

1.material中的組件會根據theme的不同，會有不一樣的樣式呈現，但是這些樣式的不同只局限于material組件內部，不會影響自定義組件的樣式。