材料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';