材料2 - 如何让md-icon在SystemJS项目中工作？

Question

有Material 2基于SystemJS的项目。

材料2以这种方式安装：

npm install --save @angular/material 

那么它是有线起来SystemJS配置：

... 
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
'@angular/material': 'npm:@angular/material/material.umd.js', <-- material 2 
'@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
... 

指定图标index.html设置：

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/> 

设置MdIconRegistry：

... 
import { MaterialModule } from '@angular/material'; 
import { MdIconRegistry } from '@angular/material/icon'; 

@NgModule({ 
    imports: [ BrowserModule, MaterialModule.forRoot() ], 
    declarations: [ AppComponent ], 
    providers: [ MdIconRegistry ], 
    bootstrap: [ AppComponent ], 
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ] 
}) 
export class AppModule { 
    constructor(mdIconRegistry: MdIconRegistry) { 
     mdIconRegistry.registerFontClassAlias('material', 'material-icons'); 
    } 
} 

那么它的内部使用AppComponent：

<md-icon fontSet="material">home</md-icon> 

不过，这并不因这些JS错误的工作：

zone.js:1382 GET http://localhost:8080/node_modules/@angular/material/material.umd.js/icon 404() 
Error: (SystemJS) XHR error (404) loading http://localhost:8080/node_modules/@angular/material/material.umd.js/icon 

值得一说，同样的配置在国产项目工作正常使用Angular CLI。

如何让md-icon在SystemJS项目中工作？

Answer 1

要使用默认图标字体（与SystemJS）只是做以下的（我的作品）：

<md-icon>home</md-icon> 

你不需要根据docs使用MdIconRegistry：

顺便说一句，你所得到的错误是由这一行造成的：

import { MdIconRegistry } from '@angular/material/icon'; 

它应该只是：

import { MdIconRegistry } from '@angular/material';