Guide des symboles Material

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

Que sont les symboles Material Design ?

Material Design Les symboles sont disponibles dans trois styles et quatre axes de polices variables variables (remplissage, épaisseur, note et taille optique). Consultez l'ensemble complet des symboles Material dans la bibliothèque de symboles Material.

Axe FILL

Vous pouvez modifier le style de l'icône par défaut. Une seule icône peut renvoyer des états vides.

Pour exprimer une transition d'état, utilisez l'axe de remplissage pour l'animation ou l'interaction. Les valeurs sont égales à 0 pour la valeur par défaut ou à 1 pour une remplissage complet. Outre l'axe des pondérations, le remplissage a également une incidence sur le style de l'icône.

Axe wght

La pondération définit le poids du trait du symbole, avec une plage de pondérations entre la valeur fine (100) et la taille du gras (700). L'épaisseur peut aussi avoir une incidence sur la taille globale du symbole.

Axe GRAD

Visualisation de l'axe des notes

La pondération et la note affectent l'épaisseur d'un symbole. Les ajustements des notes sont plus précis que les ajustements des pondérations et ont un petit impact sur la taille du symbole.

La note est également disponible dans certaines polices de texte. Vous pouvez faire correspondre les niveaux de note entre le texte et les symboles pour un effet visuel harmonieux. Par exemple, si la police du texte a une valeur de -25, les symboles peuvent la faire correspondre à une valeur appropriée. Par exemple : -25.

Vous pouvez utiliser la note pour différents besoins:

Mise en évidence faible (par exemple, -25 notes) : pour limiter les reflets sur un symbole clair sur fond sombre, utilisez une note faible.

Point fort (par exemple, 200) : pour mettre en évidence un symbole, augmentez la note positive.

Axe opsz

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 à mesure que la taille de l'icône s'adapte. La taille optique permet d'ajuster automatiquement l'épaisseur du trait lorsque vous augmentez ou diminuez la taille du symbole.

Obtenir des symboles Material

Material Symboles est disponible dans plusieurs formats. Il convient à différents types de projets et de plates-formes, aussi bien pour les développeurs que pour les développeurs de maquettes ou les prototypes.

Licences

Material Symboles est disponible dans la version 2.0 de la licence Apache.

Parcourir et télécharger des icônes individuelles

L'ensemble complet des symboles Material est disponible de la bibliothèque de symboles Material au format SVG ou PNG. Elles sont adaptées au Web, à Android et à iOS, ou à tous les outils de design.

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

Utiliser des symboles Material

Utiliser sur le Web

La police Material Symboles est le moyen le plus simple d'intégrer des symboles Material Design à vos projets Web.

Les icônes sont empaquetées dans une seule police, ce qui permet aux développeurs Web d'intégrer facilement ces icônes avec seulement quelques lignes de code.

Police statique avec Google Fonts

Pour configurer facilement des polices d'icônes sur une page Web, utilisez 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 pour chaque axe, avec weight à 400, taille optique à 48, grade à 0 et fill (également à 0).

Utilisez l'API CSS Fonts pour configurer différentes valeurs d'axes. Voici quelques exemples:

Police variable avec des polices Google Fonts

Si vous animez des icônes via CSS ou souhaitez mieux contrôler leurs fonctionnalités, utilisez la police de symboles Google. En utilisant les plages, au format number..number, nous pouvons charger l'ensemble de la police des variables. Consultez la section Polices compatibles avec les variables pour savoir si vos utilisateurs sont en mesure de charger la police des variables, très probablement. Voici quelques exemples :

Vous pouvez même les animer !

Auto-héberger la police

Hébergez la police de l'icône dans un emplacement que vous contrôlez afin de 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 correctement la police, déclarez les règles CSS pour l'affichage de l'icône. Ces règles sont normalement diffusées dans la feuille de style de l'API Google Fonts, mais vous devez les inclure manuellement dans vos projets en cas d'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;
}

Utiliser les icônes en HTML

Les exemples fournis ci-dessus utilisent une fonctionnalité de typographie 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 du texte par le vecteur d'icône et fournit un code plus lisible que la référence numérique de caractère équivalente. Par exemple, dans votre code HTML, arrow_forward représentera une icône au lieu de &#xE5C8;.

Cette fonctionnalité est compatible avec la plupart des navigateurs récents sur ordinateurs et appareils mobiles. Pour savoir si vos utilisateurs sont en mesure de traiter les ligatures, consultez la section Compatibilité avec les ligatures.

Si vous devez accepter les 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:

Recherchez les noms et les points de code de l'icône dans la bibliothèque de symboles Material en sélectionnant l'une des icônes et en ouvrant le panneau de polices de l'icône. Chaque police d'icône possède un index de points de code dans le dépôt git Google Fonts, qui indique l'ensemble complet des noms et des codes de caractères.

Attribuer un style aux icônes dans Material Design

Ces icônes ont été conçues pour respecter les consignes Material Design, et leur apparence est optimale lorsque vous utilisez les tailles et les couleurs recommandées. Les styles ci-dessous vous 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 Vector Drawable. Pour en savoir plus, consultez la documentation sur Android Vector Asset Studio.

Utiliser sur iOS

Les icônes sont également disponibles au format Symboles Apple. 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 Design est prévue. Connectez-vous régulièrement pour vous tenir informé.