Материал 2 - как разрешить работу md-icon в проекте SystemJS?

Question

Имейте материальный проект на основе 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 

Стоит сказать, такая же конфигурация прекрасно работает в проекте из используя Угловую CLI.

Как разрешить работу md-icon в проекте SystemJS?

Answer 1

Для использования значка по умолчанию шрифт (с SystemJS) просто сделать следующее (это работает для меня):

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

Вам не нужно использовать MdIconRegistry согласно docs:

Как в стороне, ошибка вы получаете вызвана этой линией:

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

Это должно быть просто:

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