Liste aller Mat Symbole in Angular

Wir werden Websites vorstellen, auf denen wir alle Mat Symbole in Angular finden und Methoden zur Verwendung dieser Mat Symbole in Angular-Projekten.

Material Design Icons DX in Angular

Materialdesign-Symbole DX ist eine Abzweigung von Googles Materialdesign-Symbolen, in der Sie mehr als 900 Materialsymbole finden. Dieses Projekt wurde erstellt, um Probleme mit der Entwicklungserfahrung zu beheben.

Es gibt zwei Möglichkeiten, Materialdesign-Symbole in Ihrem Projekt zu installieren.

So installieren Sie mit npm:

npm install material-design-icons-iconfont --save

So include oder @import die vorkompilierte CSS-Datei:

<link href=".../material-design-icons.css" rel="stylesheet">

Verwendungszweck

Mit scss können Sie Schriftarten und Variablen in Ihr Projekt importieren.

$material-design-icons-font-directory-path: '~material-design-icons-iconfont/dist/fonts/';

@import '~material-design-icons-iconfont/src/material-design-icons';

Anpassen von Klassen

Wir können unsere Klassen anpassen und auf Materialvariable mit Sass mixins zugreifen.

.my-home {
  @include material-icon('home');
}
# or
.my-home:before {
  content: material-icons-content('home');
}

Eine Liste mit Symbolen finden Sie hier.

Angular Material Icons von Google bereitgestellt

Die Materialdesign-Systemsymbole von Google sind für jedes Projekt einfach zu verwenden und es gibt mehr als 900 Materialsymbole. Der Selektor <mat-icon> zeigt Materialsymbole in Angular an. <mat-icon> ist Teil eines Angular-Materialmoduls namens MatIconModule.

Wir können Schriftartligaturen als Symbol verwenden, indem wir den Ligaturtext in die Komponente <mat-icon> einfügen.

Beispiel:

<mat-icon>home</mat-icon>

Wir müssen MatIconModule aus Angular-Materialmodulen importieren.

import {MatIconModule} from '@angular/material/icon'

Eine Liste mit Symbolen finden Sie hier.