Material使用md-icon组件显示svg图标

首先分享一个图标库，由阿里巴巴分享：iconfont.cn。
如果我要使用iconfont.cn上的svg，那么首先下载图标到assets目录中，然后使用MdIconRegistry和DomSanitizer完成。
我们可以在module.ts中统一引入图标，那么在module下的所有组件就可以自由使用，一次性加载，节约资源。以后如果需要使用svg，只需要在app/utils/svg.util.ts文件中统一配置。
具体步骤：

1、新建app/utils/svg.util.ts文件，代码如下：

import {MdIconRegistry} from '@angular/material';
import {DomSanitizer} from '@angular/platform-browser';
export const loadSvgResources = (ir: MdIconRegistry, ds: DomSanitizer) => {
  ir.addSvgIcon('gifts', ds.bypassSecurityTrustResourceUrl('assets/fullscreen-exit.svg'));
};

2、在***.Module.ts文件中一次性引入

...
import {HttpModule} from '@angular/http';//因为使用到安全连接加载svg，所以必须引入http模块
import {MdIconRegistry} from '@angular/material';
import {DomSanitizer} from '@angular/platform-browser';
import {loadSvgResources} from '../utils/svg.util';

@NgModule({
  imports: [
   ...
    MdToolbarModule,
    MdIconModule,
    MdButtonModule,
    HttpModule
  ],
  declarations: [HeaderComponent, FooterComponent, SidebarComponent],
  exports: [
    HeaderComponent, SidebarComponent, FooterComponent
  ]
})
export class CoreModule {
  constructor(ir: MdIconRegistry, ds: DomSanitizer) {
    loadSvgResources(ir, ds);
  }
}

3、模板文件中使用方式

<md-icon svgIcon="gifts"></md-icon>

最后补充下，如果需要使用普通字体图标，可以直接这么写

<md-icon>menu</md-icon>