Il s'agit de deux jeux d'icônes officiels différents de Google, utilisant les mêmes conceptions sous-jacentes. Material Symbols est l’ensemble actuel, introduit en avril 2022, basé sur une technologie de police variable. Material Icons est l’ensemble classique, mais n’est plus mis à jour. Plus de détails ci-dessous.
Les icônes peuvent être parcourues de manière plus conviviale sur https://fonts.google.com/icons. Utilisez le menu déroulant en haut à gauche pour choisir entre les deux ensembles ; Les symboles de matériaux sont la valeur par défaut.
Les icônes sont conçues selon les directives de conception matérielle.
Nous serions ravis de répondre à vos besoins en matière d'icônes ! Veuillez soumettre votre demande ici sur GitHub en tant que problème.
Veuillez noter que Google Fonts n'accepte pas les soumissions d'utilisateurs de conceptions d'icônes terminées ! Il existe des directives assez strictes pour les icônes Material, et Google dispose de fichiers sources en amont à partir desquels ce dépôt est généré. Par conséquent, Google n'accepte pas les demandes d'extraction pour les fichiers d'icônes (qu'il s'agisse de suggestions de nouvelles icônes ou de correctifs pour les icônes existantes). Les concepts sont appréciés : ne concevez pas de SVG et soumettez-les via une pull request.
Cependant, les utilisateurs sont parfaitement invités à citer des fichiers ou des images externes comme exemples, pour le genre de chose qu'ils souhaitent, mais ils ne seront pas simplement pris « tels quels ». Cela fonctionne particulièrement bien si vous avez plusieurs exemples pour une seule icône, afin de nous aider à comprendre « l'essence » de l'idée.
Par exemple, il existe un logo/icône conceptuel assez universel pour « agender », donc si vous proposez à Google d'ajouter une icône d'agender dans le style Material, soit en le mentionnant, soit en pointant vers https://www.google.com/search ?q=agender+icon serait un conseil utile.
Actuellement, Google n'inclut pas les logos tiers parmi les symboles matériels ou les icônes matérielles pour des raisons juridiques. Certains logos tiers qui étaient inclus dans le passé ont depuis été supprimés.
Google ne gère actuellement pas le package npm pour ce dépôt, après la v3 (2016). Cependant, l'utilisateur @marella héberge ce qui suit. Il nous dit que ceux-ci sont automatiquement mis à jour et publiés à l'aide de GitHub Actions. Remarque : Google ne surveille ni ne vérifie ces packages.
material-icons
Ces icônes plus récentes peuvent être parcourues de manière plus conviviale sur https://fonts.google.com/icons. Utilisez le menu déroulant en haut à gauche pour choisir entre les deux ensembles ; Les symboles de matériaux sont la valeur par défaut.
Ces icônes ont d'abord été construites/conçues sous forme de polices variables (basées sur les conceptions de 24 px de Material Icons). Il existe trois polices variables distinctes pour les symboles matériels, qui ont également des icônes statiques disponibles (mais celles-ci n'ont pas toutes les variantes disponibles, car cela représenterait des centaines de styles) :
Chacune des polices possède ces axes de conception, qui peuvent varier en CSS ou dans de nombreuses applications de conception plus modernes :
Les répertoires suivants de ce référentiel contiennent spécifiquement du contenu de symboles matériels (et non d'icônes matérielles) :
Qu'est-ce qui n'est actuellement pas disponible dans les symboles matériels ?
Les icônes peuvent être parcourues de manière plus conviviale sur https://fonts.google.com/icons?icon.set=Material+Icons
Ces icônes classiques sont disponibles dans cinq styles distincts :
Les répertoires suivants de ce référentiel contiennent spécifiquement du contenu d'icônes matérielles (et non de symboles matériels) :
Qu'est-ce qui n'est actuellement pas disponible dans les icônes matérielles ?
Lisez le guide du développeur pour savoir comment utiliser les icônes de conception matérielle dans votre projet.
Les dossiers font
et variablefont
contiennent des fichiers de polices pré-générés qui peuvent être inclus dans un projet. Ceci est particulièrement pratique pour le Web ; cependant, il est généralement préférable de créer un lien vers la police Web hébergée sur Google Fonts :
< 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 " >
En savoir plus sur les symboles matériels ou les icônes matérielles dans le guide du développeur Google Fonts.
Nous avons mis ces icônes à votre disposition pour que vous puissiez les intégrer dans vos produits sous la licence Apache version 2.0. N'hésitez pas à remixer et re-partager ces icônes et documentations dans vos produits. Nous aimerions que l'attribution apparaisse dans l'écran À propos de votre application, mais ce n'est pas obligatoire.