Que sont les symboles Material ?
Les symboles Material sont nos toutes dernières icônes. Ils regroupent plus de 2 500 glyphes dans une fichier de police unique avec un large éventail de variantes de conception. Les symboles sont disponibles dans trois styles et quatre axes de police variable réglables (remplissage, épaisseur, niveau 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 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.
wght axe
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 aussi avoir une incidence sur la taille globale .
GRAD axe
Le poids et le niveau déterminent 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 notation 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 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:
Faible intensité (par exemple, -25) : permet de réduire la luminosité d'un symbole clair sur un écran arrière-plan, utilisez une note faible.
Intensité élevée (par exemple, 200e) : pour mettre en surbrillance un symbole, augmentez la valeur positive une note.
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 à 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 les Licence Apache version 2.0
Parcourir et télécharger des icônes individuelles
L'ensemble complet de symboles Material est disponible dans la Bibliothèque de symboles Material au format SVG ou PNG. Elles sont adaptées au Web, à Android, à iOS, outils de conception.
Dépôt Git
La dépôt git contient l'ensemble 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 les 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ône pour une utilisation dans n'importe quelle page Web consiste à 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, par poids à 400, taille optique à 48 ans, note à 0 et remplissage (également égal à 0).
Utilisez les API Fonts CSS pour configurer différentes valeurs des axes. Examinez les exemples suivants:
<ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">Police variable avec Google Fonts
Si vous animez des icônes via CSS ou souhaitez contrôler plus précisément 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. Départ
Prise en charge des polices variables de Can I Use
pour savoir si vos utilisateurs pourront charger la police variable,
que c’est le cas. Voici quelques exemples :
Ou même les animer !
<ph type="x-smartling-placeholder">Auto-hébergement de la police
Hébergez le
police de l'icône
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 la police correctement, déclarez les règles CSS pour l'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 un glyphe d’icône simplement
en utilisant son nom textuel. La
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 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 l'étiquette snake case du nom de l'icône.
(remplacez les espaces par des traits de soulignement).
Cette fonctionnalité est compatible avec la plupart des navigateurs récents, aussi bien sur ordinateur que sur mobile. appareils. Voir Prise en charge des ligatures de Can I Use pour voir si vos utilisateurs seront capables de traiter les ligatures, que possible.
Si vous devez prendre en charge des navigateurs qui n'acceptent pas les ligatures, spécifiez le des 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">Repérez à la fois les noms des icônes et les points de code Bibliothèque de symboles Material en sélectionnant une icône et en ouvrant le panneau de police des icônes. Chaque police d'icône dispose d'un index de points de code dans Google Fonts dépôt git affichant 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 pour suivre Consignes relatives au Material Design 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 le Documentation Android Vector Asset Studio
Utiliser sur 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 conseils d'utilisation.
Utiliser dans Flutter
La compatibilité de Flutter avec les symboles Material est prévue. Connectez-vous régulièrement pour effectuer des mises à jour.