组件的文档API如下：
如果我们想使用谷歌的图片字体库的话 需要我们来设置360对于谷歌图片库的镜像，在index.html里面导入。
<link href="//lib.baomitu.com/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet">
但是我们在使用图片库的时候需要注意 ：
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相同的设置字体图像 我们同时可以使用 设置 svg的方式来完成
给大家推荐一个矢量标签库。
http://www.iconfont.cn/
在矢量标签库的官网下载svg图片， 将下载的 svg 图片放到 assets 的文件夹下面，
在需要使用的组件中导入引用
import {MdIconRegistry} from "@angular/material";
import {DomSanitizer} from "@angular/platform-browser";
并注入到构造函数中，
并在 组件 html 模板 中设置 svg 图片
注意 使用到 svg 字体图库的时候 需要 添加 httpModule 模块。
上面的svg图片库的引用也有缺陷，缺陷就是 我们每一次使用到图片的时候都需要做类似上面的同样的设置，为了简化代码
我们创建一个工具类， svg.util.ts 并在其中写一个loadSvgResources方法调用整个的 svg 资源 。
同时 我们 在 core.modulle.ts 设置 svg 图片资源仅仅加载一次。
import {MdIconRegistry} from "@angular/material";
import {DomSanitizer} from "@angular/platform-browser";
//作用是在系统中只加载一次
export class CoreModule {
constructor(@Optional()@SkipSelf()parent:CoreModule
, ir:MdIconRegistry,ds:DomSanitizer ){
if(parent){
throw new Error('模块已经存在，不能重复加载');
}
loadSvgResources(ir,ds);
}
}
当我们的svg图片是一个 svg图片集合的时候，我们需要使用另一个方法加载svg图片
ir.addSvgIconSetInNamespace('avatars',ds.bypassSecurityTrustResourceUrl('assets/avatars.svg'));
this.items=nums.map(d=>avatars:svg-${d});
给 图片的 md-icon 设置 样式：
md-icon.avatars{
overflow: hidden;
width: 25px;
height: 25px;
border-radius: 50%;
}
md-card{
width: 20em;
flex: 0 0 20em;
}
