Winkelmaterial-Symbole funktionieren nicht

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?

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

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"
   ]
   

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';
}

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">

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;
}

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">

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

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.

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';

                    }

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

Falscher Symbolname : Einige Material-Symbolnamen sind falsch.

Zum Beispiel : Material Icon bietet filter_alt für

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

aber es zeigt sich 😟

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>

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>

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

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

**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';
}