Material-Symbol wird nicht korrekt wiedergegeben
Material-Symbol wird nicht korrekt wiedergegeben, die in meinem Projekt habe ich ordnungsgemäß installiert, aber auch wenn nicht angezeigt im browser.
folgte ich unten Schritte:
npm install material-design-icons
.Winkel-cli.json
"styles": [
"styles.css",
"../node_modules/material-design-icons/iconfont/material-icons.css"
],
app.- Modul.ts
import {MatSidenavModule, MatToolbarModule, MatIconModule} from '@angular/material';
app.component.html
<mat-toolbar-row>
<span>Second Line</span>
<span class="example-spacer"></span>
<mat-icon class="example-icon">verified_user</mat-icon>
</mat-toolbar-row>
mat-icon
-> md-icon
vor dem release gestern war es die bevorzugte route zu importieren MdIconModule
eher als MatIconModule
als gut.Anmerkung... bist du sicher, dass die eigentlichen Schriften (und nicht nur die css) google.github.io - /material-design-icons/# - Symbol-font-for-the-web?
InformationsquelleAutor dhana | 2017-10-08
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich hatte das gleiche Problem. Verursacht, da war ich importieren das material, Thema, bevor die Schriften in mein Thema.scss.
Werden sollte:
InformationsquelleAutor Chris Fremgen
Ich hatte das gleiche Problem, weil ich vergaß hinzuzufügen, das Modul auf NgModule.Importe :
InformationsquelleAutor Dung-Tri LE
betrachten mit google CDN statt, indem Sie die folgenden Ihre
index.html
:Edit:
verschieben/laden der CSS-Datei, und platzieren Sie es im Ordner "assets" und dann in Ihrer
angular-cli.json
fügen Sie den folgenden, um Ihre Stile array:InformationsquelleAutor Hamed Baatour
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" >
stellen Sie sicher, dies wurde Hinzugefügt, um Ihre index.html.
InformationsquelleAutor headmelon
Hatte ich meine eigene schriftart
!important
hatte, um die Symbole wichtiger:
InformationsquelleAutor jenson-button-event
Lief in dieser im Winkel 6, Lösung endete als Zugabe mat-Symbol-Schaltfläche,
Stellen Sie sicher, fügen MatIconModule zu Ihrer app.- Modul.ts importiert und es sollte funktionieren wie ein Charme.
InformationsquelleAutor Goran Šutić
Überprüfen Sie Ihre Konsole für verschiedene Fehler.
Wenn Sie eine verschiedene Fehler in der Komponente, könnte es sein, der verhindert, dass Ihre
mat-icon
aus ordnungsgemäß initialisiert und sehen Sie nur die textuelle Darstellung der Glyphe statt.InformationsquelleAutor Simon_Weaver