組件的文檔API如下：
如果我們想使用谷歌的圖片字體庫(kù)的話 需要我們來(lái)設(shè)置360對(duì)于谷歌圖片庫(kù)的鏡像，在index.html里面導(dǎo)入。
<link rel="stylesheet">
但是我們?cè)谑褂脠D片庫(kù)的時(shí)候需要注意 ：
The <mat-icon> element should be a child of a <button> or <a> element.
上面的英文的意思是 <mat-icon> 必須要在 <button> or <a> 里面
并且 要在 <button> or <a> 聲明屬性 mat-icon-button
<button md-icon-button (click)="openSidebar()">
<md-icon>menu</md-icon>
</button>
與 mat-icon相同的設(shè)置字體圖像 我們同時(shí)可以使用 設(shè)置 svg的方式來(lái)完成
給大家推薦一個(gè)矢量標(biāo)簽庫(kù)。
http://www.iconfont.cn/
在矢量標(biāo)簽庫(kù)的官網(wǎng)下載svg圖片， 將下載的 svg 圖片放到 assets 的文件夾下面，
在需要使用的組件中導(dǎo)入引用
import {MdIconRegistry} from "@angular/material";
import {DomSanitizer} from "@angular/platform-browser";
并注入到構(gòu)造函數(shù)中，
并在 組件 html 模板 中設(shè)置 svg 圖片
注意 使用到 svg 字體圖庫(kù)的時(shí)候 需要 添加 httpModule 模塊。
上面的svg圖片庫(kù)的引用也有缺陷，缺陷就是 我們每一次使用到圖片的時(shí)候都需要做類似上面的同樣的設(shè)置，為了簡(jiǎn)化代碼
我們創(chuàng)建一個(gè)工具類， svg.util.ts 并在其中寫一個(gè)loadSvgResources方法調(diào)用整個(gè)的 svg 資源 。
同時(shí) 我們 在 core.modulle.ts 設(shè)置 svg 圖片資源僅僅加載一次。
import {MdIconRegistry} from "@angular/material";
import {DomSanitizer} from "@angular/platform-browser";
//作用是在系統(tǒng)中只加載一次
export class CoreModule {
constructor(@Optional()@SkipSelf()parent:CoreModule
, ir:MdIconRegistry,ds:DomSanitizer ){
if(parent){
throw new Error('模塊已經(jīng)存在，不能重復(fù)加載');
}
loadSvgResources(ir,ds);
}
}
當(dāng)我們的svg圖片是一個(gè) svg圖片集合的時(shí)候，我們需要使用另一個(gè)方法加載svg圖片
ir.addSvgIconSetInNamespace('avatars',ds.bypassSecurityTrustResourceUrl('assets/avatars.svg'));
this.items=nums.map(d=>avatars:svg-$u0z1t8os);
給 圖片的 md-icon 設(shè)置 樣式：
md-icon.avatars{
overflow: hidden;
width: 25px;
height: 25px;
border-radius: 50%;
}
md-card{
width: 20em;
flex: 0 0 20em;
}
