Material(包括Material Icon)在Angular2中的使用详解

npm install @angular/material @angular/cdk

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

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

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

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

npm install material-design-icons

@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';
}

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

"styles": [
    "styles.scss"
   ],

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; 
 @import '~@angular/material/prebuilt-themes/indigo-pink.css'; 
 @import '~@angular/material/prebuilt-themes/pink-bluegrey.css'; 
 @import '~@angular/material/prebuilt-themes/purple-green.css';

@import '~@angular/material/theming';
@include mat-core();
$my-app-primary: mat-palette($mat-blue); 
$my-app-aent: mat-palette($mat-teal, A200, A100, A400); 
$my-app-warn: mat-palette($mat-red); 
$my-app-theme: mat-light-theme($my-app-primary, $my-app-aent, $my-app-warn);
@include angular-material-theme($my-app-theme);