Dabei handelt es sich um zwei unterschiedliche offizielle Icon-Sets von Google, denen die gleichen Grunddesigns zugrunde liegen. Material Symbols ist der aktuelle Satz, der im April 2022 eingeführt wurde und auf der Technologie variabler Schriftarten basiert. Material Icons ist das klassische Set, wird jedoch nicht mehr aktualisiert. Weitere Details weiter unten.
Die Icons können benutzerfreundlicher unter https://fonts.google.com/icons durchsucht werden. Verwenden Sie das Popdown-Menü oben links, um zwischen den beiden Sätzen zu wählen. „Materialsymbole“ ist die Standardeinstellung.
Die Icons werden nach den Material-Design-Richtlinien gestaltet.
Wir würden uns freuen, Ihre Icon-Bedürfnisse zu unterstützen! Bitte reichen Sie Ihre Anfrage hier auf GitHub als Problem ein.
Bitte beachten Sie, dass Google Fonts keine Benutzereinsendungen fertiger Icon-Designs akzeptiert! Es gibt ziemlich strenge Richtlinien für Materialsymbole, außerdem verfügt Google über Upstream-Quelldateien, aus denen dieses Repo generiert wird. Daher akzeptiert Google keine Pull-Anfragen für Symboldateien (sei es Vorschläge für neue Symbole oder Korrekturen für vorhandene Symbole). Konzepte sind willkommen – entwerfen Sie einfach keine SVGs und reichen Sie sie per Pull-Request ein.
Benutzer sind jedoch durchaus willkommen, auf externe Dateien oder Bilder als Beispiele zu verweisen – für die Art von Dingen, die sie wollen, aber sie werden nicht einfach so genommen, „wie sie sind“. Dies funktioniert besonders gut, wenn Sie mehrere Beispiele für ein einzelnes Symbol haben, um uns zu helfen, das „Wesen“ der Idee zu verstehen.
Beispielsweise gibt es ein ziemlich universelles konzeptionelles Logo/Symbol für „Agender“. Wenn Sie Google also vorschlagen, fügen Sie ein Agender-Symbol im Materialstil hinzu, indem Sie dies entweder erwähnen oder auf https://www.google.com/search verweisen ?q=agender+icon wäre ein hilfreicher Tipp.
Derzeit schließt Google aus rechtlichen Gründen keine Logos von Drittanbietern in die Materialsymbole oder Materialsymbole ein. Einige in der Vergangenheit enthaltene Logos von Drittanbietern wurden inzwischen entfernt.
Google verwaltet das npm-Paket für dieses Repo derzeit nicht, nach Version 3 (2016). Allerdings hostet Benutzer @marella Folgendes. Er teilt uns mit, dass diese mithilfe von GitHub Actions automatisch aktualisiert und veröffentlicht werden. Hinweis: Google überwacht oder überprüft diese Pakete nicht .
material-icons
PaketsDiese neueren Symbole können benutzerfreundlicher unter https://fonts.google.com/icons durchsucht werden. Verwenden Sie das Popdown-Menü oben links, um zwischen den beiden Sätzen zu wählen. „Materialsymbole“ ist die Standardeinstellung.
Diese Symbole wurden zunächst als variable Schriftarten erstellt/entworfen (basierend auf den 24-Pixel-Designs von Material Icons). Es gibt drei separate variable Schriftarten für Materialsymbole, für die auch statische Symbole verfügbar sind (bei denen jedoch nicht alle Variationen verfügbar sind, da dies Hunderte von Stilen wären):
Jede der Schriftarten verfügt über diese Designachsen, die in CSS oder in vielen moderneren Design-Apps variiert werden können:
Die folgenden Verzeichnisse in diesem Repo enthalten speziell Inhalte zu Materialsymbolen (nicht zu Materialsymbolen):
Was ist derzeit in Materialsymbolen nicht verfügbar?
Die Symbole können benutzerfreundlicher unter https://fonts.google.com/icons?icon.set=Material+Icons durchsucht werden
Diese klassischen Symbole sind in fünf verschiedenen Stilen erhältlich:
Die folgenden Verzeichnisse in diesem Repo enthalten speziell Inhalte zu Materialsymbolen (nicht zu Materialsymbolen):
Was ist derzeit in Material Icons nicht verfügbar?
Lesen Sie den Entwicklerleitfaden zur Verwendung der Materialdesign-Symbole in Ihrem Projekt.
Die Ordner font
und variablefont
enthalten vorgenerierte Schriftartdateien, die in ein Projekt eingebunden werden können. Dies ist besonders praktisch für das Web; Im Allgemeinen ist es jedoch besser, auf die auf Google Fonts gehostete Webschriftart zu verlinken:
< link href =" https://fonts.googleapis.com/css2?family=Material+Icons "
rel =" stylesheet " >
< link href =" https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined "
rel =" stylesheet " >
Weitere Informationen zu Materialsymbolen oder Materialsymbolen finden Sie im Google Fonts-Entwicklerhandbuch.
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.