Que sont les symboles Material ?
Les symboles Material sont nos icônes les plus récentes. Ils regroupent plus de 2 500 glyphes dans un seul fichier de police avec un large éventail de variantes de conception. Les symboles sont disponibles en trois styles et quatre axes de police variables ajustables (remplissage, épaisseur, niveau et taille optique). Consultez l'ensemble des symboles Material dans la section Symboles Material bibliothèque.
FILL axe
Le remplissage vous permet de modifier le style d'icône par défaut. Une seule icône peut qui affiche à la fois l'état non rempli et l'état rempli.
Pour transmettre une transition d'état, utilisez l'axe de remplissage pour l'animation ou l'interaction. Les valeurs sont 0 pour la valeur par défaut ou 1 pour une version entièrement remplie. En plus du poids , le remplissage a également une incidence sur l’apparence de l’icône.
Axe wght
L'épaisseur définit l'épaisseur du trait du symbole, avec une fourchette de poids comprise entre fin (100) et gras (700). Le poids peut également affecter la taille globale du symbole.
GRAD axe
L'épaisseur et le niveau ont une incidence sur l'épaisseur d'un symbole. Les ajustements de la note sont plus précis que les ajustements de pondération et ont un faible impact sur la taille le symbole.
La note est également disponible dans certaines polices de texte. Vous pouvez faire correspondre les niveaux entre texte et symboles pour un effet visuel harmonieux. Par exemple, si la police de texte a une valeur de qualité de -25, les symboles peuvent la faire correspondre à une valeur appropriée, par exemple -25.
Vous pouvez utiliser la note pour différents besoins:
Faible accentuation (par exemple, -25 degrés) : pour réduire l'éblouissement d'un symbole clair sur un fond sombre, utilisez un degré faible.
Accentuation élevée (par exemple, 200) : pour mettre en avant un symbole, augmentez l'accentuation positive.
opsz axe
Les tailles optiques vont de 20 dp à 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'agrandit. La taille optique permet de ajuster 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 concepteurs dans leurs maquettes ou prototypes.
Licences
Les symboles Material sont disponibles dans la version de la licence Apache 2,0 pour en savoir plus.
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. Ils sont adaptés 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
Utiliser les symboles Material
Utiliser sur le Web
La police Material Symbols est le moyen le plus simple d'intégrer des symboles Material dans des projets Web.
Les icônes sont empaquetées dans une seule police afin que les développeurs Web puissent facilement incorporer ces icônes avec seulement quelques lignes de code.
Police statique avec Google Fonts
Le moyen le plus simple de configurer des polices d'icônes à utiliser sur n'importe quelle page Web est d'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 de code ci-dessus inclut la configuration par défaut pour chaque axe, avec une épaisseur de 400, une taille optique de 48, une note de 0 et un remplissage (également 0).
Utilisez le CSS Fonts de l'API pour configurer différentes valeurs des axes. Consultez les exemples suivants :
<ph type="x-smartling-placeholder">Police variable avec Google Fonts
Si vous animez des icônes via CSS ou si vous souhaitez mieux contrôler les fonctionnalités des icônes, utilisez la police variable Google Symbols. Avec des plages, au format number..number,
nous pouvons charger l'intégralité
de la police variable. Consultez Can I Use's Variable Fonts
assistance
pour savoir si vos utilisateurs pourront charger la police variable,
que c’est le cas. Voici quelques exemples :
Ou même les animer !
Optimiser la police des icônes
Sous-ensemble la police pour n'inclure que les icônes pertinentes pour votre application à l'aide du paramètre de requête
&icon_names, à l'aide d'une liste de noms d'icônes (ligatures) triée par ordre alphabétique et séparée par une virgule.Non recommandé : Utilisation de la valeur par défaut charge les 3 800 icônes. Charge utile de la police : 295 Ko
https://fonts.googleapis.com/css2?family=Material+Symbols+OutlinedRecommandé : spécifiez les noms d'icônes pour ne charger que les icônes nécessaires. Charge utile de la police : 1,7 Ko
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=home,palette,settings&display=blockInstance les axes de police des variables pour n'inclure que ceux que votre application utilisera. La plupart des applications ne nécessitent que quelques variations des axes.
Non recommandé : si la configuration des axes est manquante, la police statique par défaut est chargée (épaisseur 400, taille optique 24, arrondi 50, niveau 0, remplissage 0). L'inclusion de tous les axes de police variables dans leur intégralité n'est généralement pas nécessaire et augmente la charge utile. Charge utile de la police: 7,9 Mo
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD,ROND@20..48,100..700,0..1,-50..200,0..100Recommandé : une combinaison spécifique d'axes est utilisée. Par exemple, l'axe "FILL" complet fournit des transitions CSS entre les états, et la conception "ROND" 100 est choisie. Charge utile de la police: 2,6 Ko
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL,ROND@0..1,100&icon_names=home,palette,settings&display=block
Héberger la police
Hébergez l'icône
police
dans un emplacement que vous contrôlez, afin de décider quand mettre à jour l'asset. Pour
exemple si l'URL est https://example.com/material-symbols.woff, ajoutez le
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 d'affichage de l'icône. Ces sont normalement intégrées à la feuille de style de l'API Google Fonts, mais doivent être inclus 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;
}
Utilisation des icônes dans le code HTML
Les exemples fournis ci-dessus utilisent une caractéristique typographique appelée
ligatures
, qui permet d'afficher le glyphe d'une icône en utilisant son nom textuel. Le Web
le navigateur remplace automatiquement la ligature du texte par le vecteur d'icône et
fournit un code plus lisible que la référence de caractère numérique équivalente. Pour
exemple, votre code HTML comportera arrow_forward pour représenter une icône,
au lieu de . Pour les autres icônes, utilisez la casse en 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 modernes, que ce soit sur ordinateur ou sur appareil mobile. Consultez Can I Use's ligatures support (Pouvez-vous utiliser les ligatures ?) pour savoir si vos utilisateurs pourront traiter les ligatures.
Si vous devez prendre en charge les navigateurs qui ne prennent pas en charge 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 :
<ph type="x-smartling-placeholder">Pour trouver les noms et les codes d'icône dans la bibliothèque de symboles Material, sélectionnez une icône et ouvrez le panneau de police de l'icône. Chaque police d'icône dispose d'un un index de points de code dans le fichier git de Google Fonts dépôt affichant l'ensemble complet des noms et des codes de caractères.
Styliser des icônes dans Material Design
Ces icônes ont été conçues pour suivre le Material Design consignes, et leur affichage est optimal lorsque vous utilisez les tailles et les couleurs d'icône recommandées. Styles ci-dessous facilitent l'application des tailles, couleurs et états d'activité recommandés.
<ph type="x-smartling-placeholder">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 dans iOS
Les icônes sont également disponibles au format Symboles Apple. Pour en savoir plus à leur sujet, découvrez les symboles Apple Présentation et utilisation conseils.
Utilisation dans Flutter
La prise en charge de Flutter pour les symboles Material est prévue. Connectez-vous régulièrement pour effectuer des mises à jour.