Ich habe Material für Winkel installiert,
Ich habe auf meinem App-Modul MatIconModule (mit import { MatIconModule } from '@angular/material/icon';
) importiert
Ich habe es unter meinen ngmodule-Importen hinzugefügt mit:
@NgModule({
imports: [
//...
MatIconModule,
//...
Ich habe alle Stylesheets importiert
Und ich habe es auch in meine App-Komponente importiert, die sie tatsächlich verwendet (versucht) (mit einer anderen import {MatIconModule} from '@angular/material/icon';
Zeile am Anfang).
Materialsymbole werden jedoch immer noch nicht angezeigt.
Zum Beispiel mit dieser Zeile:
<button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
Ich erwarte so etwas:
Aber ich verstehe das:
Hast du einen Vorschlag?
Antworten:
CSS-Stylesheet für Materialsymbole hinzufügen!
Fügen Sie Ihrer index.html Folgendes hinzu:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Siehe - https://github.com/angular/material2/issues/7948
quelle
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
@import "~material-icons/iconfont/material-icons.css";
zu Ihren styles.cssFür Angular 6+:
npm install material-design-icons
Fügen Sie die Stile zu angle.json hinzu:
quelle
Wenn Sie SASS verwenden, müssen Sie nur diese Zeile zu Ihrer Hauptdatei hinzufügen
.scss
:Wenn Sie das Abrufen von Symbolen von Google vermeiden möchten, können Sie die Symbole auch selbst hosten, wie im Handbuch zu Materialsymbolen beschrieben :
quelle
Sie müssen MatIconModule importieren und die folgende URL in index.html verwenden
quelle
In meinem Fall wurde ein Stil angewendet, der die Schriftfamilie überschreibt. Also habe ich den Schriftfamilienstil explizit wie folgt hinzugefügt:
quelle
Die vollständige Lösung kann sein:
Schritt eins
Sie müssen
MatIconModule
in Ihr Projekt importieren . In meinem Projekt importiere ich die erforderliche Komponente in eine separate Datei und importiere sie dann in das AppModule. Sie können diese verwenden oder direkt importieren:Schritt zwei
Laden Sie die Symbolschrift in Ihre
index.html
:quelle
In meinem Fall war der von mir geschriebene Symbolname keinem Symbol zugeordnet.
Sie können die korrekten Namen hier überprüfen: https://material.io/tools/icons/?style=baseline
quelle
In meinem Fall wurden die Symbole nicht angezeigt, da ich meine Schriftarten mit! Important durcheinander gebracht habe. Wenn Sie das herausnehmen, werden die Symbole angezeigt.
quelle
Ich bin auf das Problem gestoßen, dass Symbole für mich nicht angezeigt werden. Ich hatte die Schritte von Basavaraj Bhusani befolgt, funktionierte aber immer noch nicht.
Ich stellte fest, dass das Problem darin bestand, dass ich in meinem scss das hatte,
text-transform: uppercase
was dazu führte, dass das Symbol nur den Inhalt 'arrow_forward' anzeigte. Ich musstetext-transform: none
das Symbol speziell ändern, sonst würde es nicht gerendert.quelle
Mir wurde klar, dass niemand über die Installation von HammerJs sprach, bevor er sie in Ihre App importierte. Nun, für Leute, die ein ähnliches Problem haben, müssen Sie zuerst hammerJs importieren. Sie können entweder NPM, Yarn oder Google CDN für die Installation verwenden. Diese Antwort gilt für die Installation mit NPM oder Garn:
NPM
Garn
Importieren Sie es nach der Installation in den Einstiegspunkt Ihrer App (z. B. src / main.ts).
Wenn Sie Google CDN bevorzugen, besuchen Sie bitte das Angular-Material, um weitere Erläuterungen zu erhalten: https://material.angular.io/guide/getting-started
quelle
Falscher Symbolname : Einige Material-Symbolnamen sind falsch.
Zum Beispiel : Material Icon bietet filter_alt für
aber es zeigt sich 😟
Fix: Wir müssen filter_list_alt für das Trichtertyp-Symbol als verwenden
quelle
Wenn Sie ein vorhandenes Angular Material-Styling oder ein anderes Styling überschrieben haben, das sich irgendwie auf das Symbol auswirkt, kann dies zu einem Problem führen. Bewegen Sie den Symbolcode außerhalb von Styling und Test.
Für mich war es eine Schriftvariante: Kapitälchen;
Also habe ich es einfach in das untergeordnete Element verschoben. Unten ist ein Teil des Winkelmaterialgitters.
quelle
Fügen Sie Ihrer index.html einfach Folgendes hinzu:
quelle
quelle