Winkelmaterial-Symbole funktionieren nicht

92

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:

erwartet

Aber ich verstehe das:

tatsächlich

Hast du einen Vorschlag?


quelle
Die Schriftart fehlt möglicherweise. oder es wird später geladen.
Basavaraj Bhusani
@BasavarajBhusani Wie kann ich das überprüfen?
Nachdem Sie die Lösungen von unten ausgeführt haben, sollten Sie den Browser-Cache leeren. es hat bei mir funktioniert.
Aditya Yada

Antworten:

181

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

Basavaraj Bhusani
quelle
9
Diese Antwort hat bei mir funktioniert, aber ich konnte diese Zeile auch zu styles.css hinzufügen und es hat funktioniert. @import 'https://fonts.googleapis.com/icon?family=Material+Icons';
J. Chaney
17
Sie können auch hinzufügen: @import "~material-icons/iconfont/material-icons.css";zu Ihren styles.css
Pooshon Banerjee
5
@PooshonBanerjee material-icons ist ein separates Projekt, das nicht vom Angular Material-Team verwaltet wird.
Vedran
36

Für Angular 6+:

  1. npm installiere dies: npm install material-design-icons
  2. Fügen Sie die Stile zu angle.json hinzu:

    "styles": [
      "node_modules/material-design-icons/iconfont/material-icons.css"
    ]
    
Katwhocodes
quelle
1
Dies ist der richtige Winkel, um es zu tun!
Wilt
1
... und die richtige Vorgehensweise bei der Verwendung von Angular für Apps (wie bei Cordova)
CularBytes
25

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

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

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 :

Für diejenigen, die die Webschrift selbst hosten möchten, ist eine zusätzliche Einrichtung erforderlich. Hosten Sie die Symbolschriftart an einem Ort, z. B. https://example.com/material-icons.woff, und fügen Sie die folgende CSS-Regel hinzu:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

Außerdem müssen die CSS-Regeln zum Rendern des Symbols deklariert werden, damit die Schriftart ordnungsgemäß gerendert wird. Diese Regeln werden normalerweise als Teil des Google Web Font-Stylesheets bereitgestellt, müssen jedoch manuell in Ihre Projekte aufgenommen werden, wenn Sie die Schrift selbst hosten:

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
Vedran
quelle
Das Problem trat auf, wenn das Symbol nicht gerendert wurde und stattdessen Text zum Schließen angezeigt wurde. Der obige Import wurde an meine scss-Datei angehängt und das Symbol 'X' wurde angezeigt. Danke :)
vinsinraw
Ich habe ein 9-Winkel-Projekt und nach dem Importieren der Schriftartdatei für Materialsymbole in .scss, immer noch das gleiche Problem, ist das Materialsymbol nicht sichtbar. Es zeigt den Test 'sichtbarkeit_off' in der mit cordova erstellten APK-Datei an. aber das gleiche funktioniert gut in localhost: 4200 Gibt es also eine andere Lösung dafür?
Jignesh Gothadiya
11

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">
Khabir
quelle
11

In meinem Fall wurde ein Stil angewendet, der die Schriftfamilie überschreibt. Also habe ich den Schriftfamilienstil explizit wie folgt hinzugefügt:

.material-icons{
    font-family: 'Material Icons' !important;
}
gradosevic
quelle
5

Die vollständige Lösung kann sein:

Schritt eins

Sie müssen MatIconModulein 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:

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 Symbolschrift in Ihre index.html:

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

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.

Marc Schluper
quelle
2

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: uppercasewas dazu führte, dass das Symbol nur den Inhalt 'arrow_forward' anzeigte. Ich musste text-transform: nonedas 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';

                    }
srunner
quelle
Vielen Dank! Ich bin schon seit Stunden dabei!
Håvard Brynjulfsen
1

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

npm install --save hammerjs

Garn

yarn add hammerjs

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

import 'hammerjs';

Wenn Sie Google CDN bevorzugen, besuchen Sie bitte das Angular-Material, um weitere Erläuterungen zu erhalten: https://material.angular.io/guide/getting-started

Oluwagbemi Kadri
quelle
1

Falscher Symbolname : Einige Material-Symbolnamen sind falsch.

Zum Beispiel : Material Icon bietet filter_alt für

Geben Sie hier die Bildbeschreibung ein

<mat-icon aria-hidden="false" aria-label=" filter icon">filter_alt</mat-icon>

aber es zeigt sich 😟

Geben Sie hier die Bildbeschreibung ein

Fix: Wir müssen filter_list_alt für das Trichtertyp-Symbol als verwenden

<mat-icon aria-hidden="false" aria-label="filter icon">filter_list_alt</mat-icon>
M Abdullah
quelle
0

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.

  <mat-grid-tile colspan="3" rowspan="1" class='title customGlobalGrid'>
    <mat-icon aria-hidden="false" aria-label="Example home icon">home</maticon>
    <span style="font-variant: small-caps;">{{item['title']}}</span>
  </mat-grid-tile>
Pejman Saberin
quelle
-1

Fügen Sie Ihrer index.html einfach Folgendes hinzu:

link href="https://fonts.googleapis.com/icon?family=Material+Icons"  rel="stylesheet"
يوسف بن عبد الرزاق
quelle
Bitte lesen Sie , wie Sie eine gute Antwort schreiben hier
User81862311
-2
**Add following code to your css**

 .material-icons {  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;

    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}
Lekh Raj
quelle