CODEWITHSUNDEEP
angularsystemjsangular-material2
WildDev
WildDev

Reputation: 2367

Material 2 - how to let md-icon work in SystemJS project?

Have Material 2 SystemJS based project.

Material 2 is installed in this way:

npm install --save @angular/material

Then it's wired up in SystemJS config:

...
'@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',
...

Specifying the icon set in index.html:

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

Setting up the 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');
    }
}

Then it's used inside AppComponent:

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

But it doesn't work due these JS errors:

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

Worth to say, the same configuration works fine in the project made using Angular CLI.

How to let the md-icon work in SystemJS project?

Upvotes: 0

Views: 177

Answers (1)

camden_kid
camden_kid

Reputation: 12813

To use the default icon font (with SystemJS) just do the following (it works for me):

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

You don't need to use MdIconRegistry according to the docs:

enter image description here

As an aside, the error you are getting is caused by this line:

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

It should just be:

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

Upvotes: 1

Related Questions