2016-12-10 15 views
0

Ich arbeite an einem Angular 2 Projekt, das Material 2 verwendet. Aus irgendeinem Grund werden Icons nicht angezeigt, nur was der "Schlüssel" des Icons als Text sein soll.angular2-material 2 Icons werden nicht angezeigt

app.module:

...  
    import {MdButtonModule} from "@angular2-material/button"; 
    import {MdIconModule, MdIconRegistry} from "@angular2-material/icon"; 
    ... 

    @NgModule({ 
     declarations: [AppComponent,... CollapseableComponent], 
     imports: [... MdButtonModule, MdIconModule, MdInputModule], 
     providers: [{ 
     provide: LocationStrategy, 
     useClass: HashLocationStrategy 
     }, ... MdIconRegistry], 
     bootstrap: [AppComponent] 
    }) 
    export class AppModule { 

    } 

index.html:

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

Ich habe versucht, mehrere Möglichkeiten:

<button md-fab> <md-icon>add</md-icon></button> 
    <button md-fab> <md-icon class="md-elevation-z1">create</md-icon></button> 
    <button md-icon-button>add</button> 

Ich glaube, ich versuchte, über 5 weitere Permutationen, aber alle mit das gleiche Ergebnis. Ich sehe den Knopf, aber mit Text darauf. Nur das Symbol allein wurde in keinem dieser Ansätze angezeigt.

Antwort

6

Sie sollten jetzt @angular/material verwenden, @ angular2-material ist veraltet. changelog

app.module Siehe:

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


    @NgModule({ 
     declarations: [AppComponent,... CollapseableComponent], 
     imports: [... MaterialModule.forRoot()], 
     providers: [{ 
     provide: LocationStrategy, 
     useClass: HashLocationStrategy 
     }, ...], 
     bootstrap: [AppComponent] 
    }) 
    export class AppModule { 

    } 

Gerade auch bemerkt, dass Sie statt " in Ihrem CSS-Link für die Schriftart verwenden.

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

Plunker: http://embed.plnkr.co/lAXjoXHZ4YdNgDOMUjPB/

+0

Hey, vielen Dank für die Ablehnung! Ich habe auch das falsche Kopier- und Einfügeproblem gefunden. Das war die Wurzel des Problems. Ein peinlicher. Prost! –

+0

@WernerWiking Ich bin froh, dass Ihnen geholfen hat, ich überprüfe immer die Änderungsprotokolle auf GitHub auf jeder neuen Version, um zu sehen, was es neu ist, kann wirklich helfen, wenn die Dokumentation wegen der Alpa-Bühne fehlt. Wenn Sie glauben, dass dies die richtige Antwort ist, markieren Sie bitte als akzeptiert, klicken Sie auf das Häkchen neben der Antwort, um es von leer auf grün umzuschalten. –

+0

MaterialModule ist jetzt veraltet – epiphanatic

0

Wie JJB darauf hingewiesen, das besondere Problem auf diese war eine falsche Art von Zitaten, wenn der Google-CSS in der index.html darunter (das war ein Copy-Paste-Fehler).

Wichtigere Sache zu entfernen ist die andere Sache J J B sagte - @ angular2-Material ist veraltet.

Verwandte Themen