material icons

Material-Symbole

Neueste Icon-Schriftarten und CSS für selbsthostende Materialdesign-Icons.

Dieses Paket wird automatisch aktualisiert, sodass es immer über die neuesten Symbole von Google verfügt.

Informationen zu Materialsymbolen finden Sie unter material-symbols

Für SVGs siehe @material-design-icons/svg

• Installation
• Verwendung
• Verfügbare Symbole

Installation

Installieren Sie die neueste Version mit:

npm install material-icons@latest

Hinweis: Wenn Sie ein Upgrade von 0.x auf 1.x durchführen, lesen Sie die Versionshinweise zu 1.0.0.

Verwendung

Import in JS (Beispiel: src/index.js in Create React App, src/main.js in Vue CLI):

 import 'material-icons/iconfont/material-icons.css' ;

oder in CSS importieren (Beispiel: src/styles.css in Angular CLI):

 @import 'material-icons/iconfont/material-icons.css' ;

oder in HTML importieren:

 < link href =" /path/to/material-icons/iconfont/material-icons.css " rel =" stylesheet " >

Um ein Symbol anzuzeigen, verwenden Sie eine der folgenden Möglichkeiten:

 < span class =" material-icons " > pie_chart </ span >          <!-- Filled -->
< span class =" material-icons-outlined " > pie_chart </ span > <!-- Outlined -->
< span class =" material-icons-round " > pie_chart </ span >    <!-- Round -->
< span class =" material-icons-sharp " > pie_chart </ span >    <!-- Sharp -->
< span class =" material-icons-two-tone " > pie_chart </ span > <!-- Two Tone -->

Reduzierung der Buildgröße

Die Standarddatei material-icons.css enthält CSS für alle Schriftarten. Dies kann dazu führen, dass Build-Tools wie Webpack alle Schriftarten in das Build-Verzeichnis kopieren, auch wenn Sie nicht alle verwenden. Um die Build-Größe zu reduzieren, importieren Sie nur die Stile, die Sie benötigen. Wenn Sie beispielsweise nur gefüllte und umrandete Symbole benötigen, importieren Sie filled.css und outlined.css anstelle der Standarddatei material-icons.css :

 - import 'material-icons/iconfont/material-icons.css';
+ import 'material-icons/iconfont/filled.css';
+ import 'material-icons/iconfont/outlined.css';

Alle anzeigen

Symbole	CSS	Sass
Gefüllt	gefüllt.css	gefüllt.scss
Umrissen	umrissen.css	Outlined.scss
Runden	rund.css	rund.scss
Scharf	scharf.css	scharf.scss
Zweifarbig	zweifarbig.css	zweifarbig.scss

Sass verwenden

Importieren in Sass (Beispiel: src/styles.scss in Angular CLI):

 @import ' material-icons/iconfont/material-icons.scss ' ;

Verfügbare Sass-Variablen:

 $material-icons-font-path : ' ./ ' !default ;
$material-icons-font-size : 24 px !default ;
$material-icons-font-display : block !default ;

Wenn beim Webpack oder der Vue-CLI Fehler auftreten, fügen Sie vor dem Import diese Zeile hinzu:

 $material-icons-font-path : ' ~material-icons/iconfont/ ' ;

Verwenden des Angular mat-icon

Um ein Symbol anzuzeigen, verwenden Sie eine der folgenden Möglichkeiten:

 < mat-icon > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-outlined " > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-round " > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-sharp " > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-two-tone " > pie_chart </ mat-icon >

Verwendung von CSS-Klassen

Alternativ können Sie CSS-Klassen anstelle von Ligaturen verwenden, um Symbole anzuzeigen. Erfahren Sie mehr

Verfügbare Symbole

Siehe Demo.

Lizenz

Materialdesign-Symbole werden von Google erstellt.

Wir haben Ihnen diese Symbole zur Integration in Ihre Produkte unter der Apache-Lizenz Version 2.0 zur Verfügung gestellt. Fühlen Sie sich frei, diese Symbole und Dokumentationen in Ihren Produkten neu zu mischen und zu teilen. Wir würden uns über eine Namensnennung im About -Bildschirm Ihrer App freuen, dies ist jedoch nicht erforderlich.