wake-up-neo.com

Angular Material Icons funktionieren nicht

Ich habe Material für eckige installiert,

Ich habe auf meinem App-Modul MatIconModule importiert (mit import { MatIconModule } from '@angular/material/icon';)

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 einem anderen import {MatIconModule} from '@angular/material/icon'; Zeile am Anfang davon).

Aber materielle Symbole werden 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:

expected

Aber ich verstehe das:

actual

Hast du einen Vorschlag?

37
user9557542

Füge ein CSS Stylesheet für Material Icons hinzu!

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

83

Wenn Sie SASS verwenden, müssen Sie diese Zeile zu Ihrer Hauptdatei .scss Hinzufügen:

@import url (" https://fonts.googleapis.com/icon?family=Material+Icons ");

8
Vedran

Sie müssen MatIconModule importieren und die folgende URL in index.html verwenden

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

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 dies verwenden oder sie direkt importieren:

import { NgModule } from "@angular/core";
import { MatButtonModule } from '@angular/material';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
    imports: [MatIconModule, MatButtonModule], // note the imports 
    exports: [MatIconModule, MatButtonModule], // and the exports
})
export class MaterialModule { }

Schritt zwei

Laden Sie die Symbolschriftart in Ihr index.html:

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

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

0

Mir ist aufgefallen, dass zuerst niemand über die Installation von hammerJs gesprochen hat, bevor es in Ihre App importiert wurde. Wenn Sie ein ähnliches Problem haben und zunächst HammerJs importieren möchten, können Sie für die Installation entweder NPM, Yarn oder Google CDN verwenden. Diese Antwort gilt für die Installation mit NPM oder Yarn:

NPM

npm install --save hammerjs

Garn

yarn add hammerjs

Importieren Sie es nach der Installation auf den Einstiegspunkt Ihrer App (z. B. src/main.ts).

import 'hammerjs';

Wenn Sie Google CDN bevorzugen, besuchen Sie bitte das Angular) Material für weitere Erklärungen https://material.angular.io/guide/getting-started

0
T.M

Ich bin auf das Problem gestoßen, dass Symbole für mich nicht angezeigt werden. Ich hatte die Schritte von Basavaraj Bhusani befolgt, aber immer noch nicht funktioniert.

Ich fand das Problem, dass ich in meinem scss den text-transform: uppercase Hatte, der dazu führte, dass das Symbol nur den Inhalt 'arrow_forward' anzeigte. Ich musste den text-transform: none Auf dem Symbol speziell ändern, sonst würde es nicht gerendert.

                .child-item-action {

                    text-transform: uppercase;

                    &:after {

                        font-family: 'Material Icons';
                        content: "arrow_forward";
                        text-transform: none;
                        -webkit-font-feature-settings: 'liga';

                    }
0
srunner

In meinem Fall wurden die Symbole nicht angezeigt, weil ich meine Schriften mit! Important durcheinander gebracht habe. Wenn Sie dies herausnehmen, werden die Symbole angezeigt.

0
Marc Schluper