Liste aller Mat Symbole in Angular

1. Material Design Icons DX in Angular
2. Angular Material Icons von Google bereitgestellt

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.