Update (31.03.2019): Alle Symbolthemen funktionieren jetzt über Google Web Fonts.
Wie Edric betonte, müssen Sie jetzt nur noch den Link zu Google Web-Schriftarten in den Kopf Ihres Dokuments einfügen:
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
Fügen Sie dann die richtige Klasse hinzu, um das Symbol eines bestimmten Themas auszugeben.
<i class="material-icons">donut_small</i>
<i class="material-icons-outlined">donut_small</i>
<i class="material-icons-two-tone">donut_small</i>
<i class="material-icons-round">donut_small</i>
<i class="material-icons-sharp">donut_small</i>
Die Farbe der Symbole kann auch mit CSS geändert werden.
Hinweis: Die zweifarbigen Themensymbole sind derzeit etwas fehlerhaft.
Update (14/11/2018): Liste von 16 Gliederungssymbolen, die mit dem Suffix "_outline" arbeiten.
Hier ist die neueste Liste von 16 Gliederungssymbolen, die mit dem regulären Material-Symbol-Webfont unter Verwendung des Suffixes _outline (getestet und bestätigt) funktionieren .
(Wie auf der Github-Seite für Materialdesign-Symbole zu finden . Suchen Sie nach: " _outline_24px.svg ")
<i class="material-icons">help_outline</i>
<i class="material-icons">label_outline</i>
<i class="material-icons">mail_outline</i>
<i class="material-icons">info_outline</i>
<i class="material-icons">lock_outline</i>
<i class="material-icons">lightbulb_outline</i>
<i class="material-icons">play_circle_outline</i>
<i class="material-icons">error_outline</i>
<i class="material-icons">add_circle_outline</i>
<i class="material-icons">people_outline</i>
<i class="material-icons">person_outline</i>
<i class="material-icons">pause_circle_outline</i>
<i class="material-icons">chat_bubble_outline</i>
<i class="material-icons">remove_circle_outline</i>
<i class="material-icons">check_box_outline_blank</i>
<i class="material-icons">pie_chart_outlined</i>
Beachten Sie, dass pie_chart Bedürfnisse sein „ pie_chart_ skizzierte “ und nicht skizzieren .
Dies ist ein Hack zum Testen der neuen Symbolthemen mithilfe eines Inline-Tags. Es ist nicht die offizielle Lösung.
Ab heute (19. Juli 2018), etwas mehr als zwei Monate seit Einführung der neuen Symbolthemen, gibt es keine Möglichkeit , diese Symbole mithilfe eines Inline-Tags einzuschließen <i class="material-icons"></i>.
+ Martin hat darauf hingewiesen, dass bei Github ein Problem aufgetreten ist: https://github.com/google/material-design-icons/issues/773
Bis Google eine Lösung dafür gefunden hat, habe ich begonnen, diese neuen Symbolthemen mithilfe eines Hacks in meine Entwicklungsumgebung aufzunehmen, bevor ich die entsprechenden Symbole als SVG oder PNG heruntergeladen habe. Und ich dachte, ich würde es mit euch allen teilen.
WICHTIG : Verwenden Sie dies nicht in einer Produktionsumgebung, da jede der enthaltenen CSS-Dateien von Google eine Größe von über 1 MB hat.
Google verwendet diese Stylesheets, um die Symbole auf der Demoseite anzuzeigen:
Gliederung:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
Gerundet:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css">
Zweifarbig:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/twotone.css">
Scharf:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">
Jede dieser Dateien enthält die Symbole der jeweiligen Themen als Hintergrundbilder (Base64-Bilddaten). Und so können wir die Kompatibilität eines bestimmten Symbols in unserem Design testen, bevor wir es zur Verwendung in der Produktionsumgebung herunterladen.
SCHRITT 1 :
Fügen Sie das Stylesheet des Themas ein, das Sie verwenden möchten. Beispiel: Verwenden Sie für das Thema "Gliederung" das Stylesheet für "Gliederung.css".
SCHRITT 2 :
Fügen Sie Ihrem eigenen Stylesheet die folgenden Klassen hinzu :
.material-icons-new {
display: inline-block;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-size: contain;
}
.icon-white {
webkit-filter: contrast(4) invert(1);
-moz-filter: contrast(4) invert(1);
-o-filter: contrast(4) invert(1);
-ms-filter: contrast(4) invert(1);
filter: contrast(4) invert(1);
}
SCHRITT 3 :
Verwenden Sie das Symbol, indem Sie dem Tag die folgenden Klassen hinzufügen <i>:
1) material-icons-newKlasse
2) Symbolname wie auf der Demoseite für Materialsymbole angezeigt, dem der Themenname gefolgt von einem Bindestrich vorangestellt ist.
Präfixe:
Umrissen: outline-
Gerundet: round-
Zweifarbig: twotone-
Scharf: sharp-
ZB (für das Symbol "Ankündigung"):
outline-announcement, round-announcement, twotone-announcement,sharp-announcement
3) Verwenden Sie eine optionale 3. Klasse, icon-whiteum die Farbe von Schwarz nach Weiß zu invertieren (für dunkle Hintergründe).
Ändern der Symbolgröße:
Da dies ein Hintergrundbild und kein Schriftsymbol ist, verwenden Sie die Eigenschaften heightund widthvon CSS, um die Größe der Symbole zu ändern. Der Standardwert ist in der material-icons-newKlasse 24px .
Beispiel:
Fall I: Für das umrissene Thema des Symbols account_circle :
1) Fügen Sie das Stylesheet hinzu:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
2) Fügen Sie das Symbol-Tag auf Ihrer Seite hinzu:
<i class="material-icons-new outline-account_circle"></i>
Optional (für dunkle Hintergründe):
<i class="material-icons-new outline-account_circle icon-white"></i>
Fall II: Für das scharfe Thema des Bewertungssymbols :
1) Fügen Sie das Stylesheet hinzu:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">
2) Fügen Sie das Symbol-Tag auf Ihrer Seite hinzu:
<i class="material-icons-new sharp-assessment"></i>
(Für dunkle Hintergründe):
<i class="material-icons-new sharp-assessment icon-white"></i>
Ich kann nicht genug betonen, dass dies NICHT DER RICHTIGE WEG ist, die Symbole in Ihre Produktionsumgebung aufzunehmen. Wenn Sie jedoch mehrere Symbole auf Ihrer in der Entwicklung befindlichen Seite durchsuchen müssen, ist die Aufnahme von Symbolen recht einfach und spart viel Zeit.
Das Herunterladen des Symbols als SVG oder PNG ist sicher eine bessere Option, wenn es um die Optimierung der Site-Geschwindigkeit geht. Schriftarten-Symbole sparen jedoch Zeit, wenn es um die Prototyping-Phase geht und überprüft wird, ob ein bestimmtes Symbol zu Ihrem Design passt usw.
Ich werde diesen Beitrag aktualisieren, wenn Google eine Lösung für dieses Problem findet, bei der kein Symbol zur Verwendung heruntergeladen wird.
