Que sont les symboles Material ?
Les symboles Material sont nos dernières icônes et regroupent plus de 2 500 glyphes dans un seul fichier de police avec un large éventail de variantes de conception. Les symboles sont disponibles dans trois styles et quatre axes de police variables ajustables (remplissage, épaisseur, étalonnage et taille optique). Consultez l'ensemble des symboles Material dans la bibliothèque de symboles Material.
FILL axe
Le remplissage vous permet de modifier le style d'icône par défaut. Une seule icône peut afficher à la fois les états non remplis et remplis.
Pour transmettre une transition d'état, utilisez l'axe de remplissage pour l'animation ou l'interaction. Les valeurs sont 0 pour une valeur par défaut ou 1 pour un remplissage complet. En plus de l'axe de pondération, le remplissage a également une incidence sur l'apparence de l'icône.
wght axe
L'épaisseur définit l'épaisseur du trait du symbole, avec une plage d'épaisseurs comprise entre fin (100) et gras (700). Le poids peut également influer sur la taille globale du symbole.
GRAD axe
Le poids et la pente ont une incidence sur l’épaisseur du symbole. Ces ajustements sont plus précis que les ajustements de pondération et ont un faible impact sur la taille du symbole.
La notation est également disponible dans certaines polices de texte. Vous pouvez faire correspondre les niveaux entre le texte et les symboles pour un effet visuel harmonieux. Par exemple, si la police de texte a une valeur de -25, les symboles peuvent lui correspondre à une valeur appropriée, par exemple -25.
Vous pouvez utiliser la notation pour différents besoins:
Faible intensité (par exemple, niveau -25) : pour réduire les reflets d'un symbole clair sur un arrière-plan sombre, utilisez un niveau faible.
Forte intensité (par exemple, note 200) : pour mettre en évidence un symbole, augmentez la note positive.
opsz axe
Les tailles optiques sont comprises entre 20 dp et 48 dp.
Pour que l'image soit identique dans différentes tailles, l'épaisseur du trait (épaisseur) change en fonction de l'échelle de la taille de l'icône. La taille optique permet d'ajuster automatiquement l'épaisseur du trait lorsque vous augmentez ou diminuez la taille des symboles.
Obtenir des symboles Material
Les symboles Material sont disponibles dans plusieurs formats et conviennent à différents types de projets et de plates-formes, à la fois pour les développeurs dans leurs applications et pour les concepteurs dans leurs maquettes ou prototypes.
Licences
Les symboles Material sont disponibles sous la licence Apache version 2.0.
Parcourir et télécharger des icônes individuelles
L'ensemble complet des symboles Material est disponible dans la bibliothèque de symboles Material aux formats SVG ou PNG. Elles sont adaptées au Web, Android et iOS, ou à n'importe quel outil de conception.
Dépôt Git
Le dépôt git contient l'ensemble complet des symboles Material au format SVG.
$ git clone https://github.com/google/material-design-icons
Utilisation des symboles Material
Utiliser sur le Web
La police Material Symbols est le moyen le plus simple d'intégrer des symboles Material à des projets Web.
Les icônes sont empaquetées dans une seule police afin que les développeurs Web puissent facilement les intégrer avec seulement quelques lignes de code.
Police statique avec Google Fonts
Le moyen le plus simple de configurer des polices d'icône à utiliser sur n'importe quelle page Web consiste à utiliser Google Fonts. Incluez cette seule ligne de code HTML:
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
L'extrait ci-dessus inclut la configuration par défaut de chaque axe, avec une pondération de 400, une taille optique de 48, un niveau de 0 et un remplissage (également 0).
Utilisez l'API Fonts CSS pour configurer différentes valeurs d'axe. Examinez les exemples suivants:
Police variable avec Google Fonts
Si vous animez des icônes via CSS ou si vous souhaitez contrôler plus précisément les fonctionnalités des icônes, utilisez la police variable de symboles Google. À l'aide de plages, au format number..number, nous pouvons charger l'intégralité de la police de la variable. Consultez la page Can I Use's Variable Fonts support (Prise en charge des polices variables de l'application) pour savoir si vos utilisateurs peuvent charger cette police variable. C'est probablement le cas. Voici quelques exemples :
Vous pouvez même les animer !
Auto-hébergement de la police
Hébergez la police de l'icône à un emplacement que vous contrôlez pour décider quand mettre à jour l'élément. Par exemple, si l'URL est https://example.com/material-symbols.woff, ajoutez la règle CSS suivante:
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
src: url(https://example.com/material-symbols.woff) format('woff');
}
Pour afficher la police correctement, déclarez les règles CSS pour le rendu de l'icône. Ces règles sont généralement incluses dans la feuille de style de l'API Google Fonts, mais vous devez les inclure manuellement dans vos projets lors de l'auto-hébergement:
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}
Utilisation des icônes en HTML
Les exemples fournis ci-dessus utilisent une fonctionnalité typographique appelée ligatures, qui permet d'afficher un glyphe d'icône simplement en utilisant son nom textuel. Le navigateur Web remplace automatiquement la ligature de texte par le vecteur d'icône et fournit un code plus lisible que la référence de caractères numériques équivalente. Par exemple, dans votre code HTML, vous indiquerez arrow_forward pour représenter une icône, au lieu de . Pour les autres icônes, utilisez la snake case du nom de l'icône (c'est-à-dire remplacez les espaces par des traits de soulignement).
Cette fonctionnalité est compatible avec la plupart des navigateurs récents sur les ordinateurs et les appareils mobiles. Consultez la page Can I Use's ligatures support (Prise en charge des ligatures) pour savoir si vos utilisateurs sont capables de traiter des ligatures.
Si vous devez utiliser des navigateurs non compatibles avec les ligatures, spécifiez les icônes à l'aide de références de caractères numériques (également appelées points de code), comme dans l'exemple ci-dessous:
Pour trouver les noms des icônes et les points de code dans la bibliothèque de symboles Material, sélectionnez n'importe quelle icône et ouvrez le panneau des polices des icônes. Chaque police d'icône possède un index de points de code dans le dépôt git de Google Fonts qui indique l'ensemble complet des noms et des codes de caractères.
Appliquer un style aux icônes dans Material Design
Ces icônes ont été conçues conformément aux consignes Material Design et s'affichent mieux selon les tailles et couleurs recommandées. Les styles ci-dessous permettent d'appliquer facilement les tailles, couleurs et états d'activité recommandés.
Utiliser sur Android
Dans la bibliothèque de symboles Material, toutes les icônes sont au format Drawable vectoriel. Pour en savoir plus, consultez la documentation Android Vector Asset Studio.
Utiliser sur iOS
Les icônes sont également disponibles au format Apple Symbols. Pour en savoir plus, consultez la présentation officielle des symboles Apple et les conseils d'utilisation.
Utiliser dans Flutter
La compatibilité de Flutter avec les symboles Material est prévue. Connectez-vous régulièrement pour vous tenir informé.