Guide des icônes Material

Un aperçu des icônes Material : où les trouver et comment les intégrer à vos projets.

Que sont les icônes Material ?

Les icônes système Material Design sont simples, modernes, conviviales et parfois originales. Chaque icône est créée conformément à nos consignes de conception pour représenter sous forme simple et minimale les concepts universels couramment utilisés dans une interface utilisateur. Afin de garantir la lisibilité et la clarté à toutes les tailles, ces icônes ont été optimisées pour un affichage esthétique sur toutes les plates-formes et résolutions d'écran courantes.

Pour consulter l'ensemble des icônes Material Design, accédez à la bibliothèque d'icônes Material.

bibliothèque d'icônes

Obtenir des icônes

Les icônes sont disponibles dans plusieurs formats et conviennent à différents types de projets et de plates-formes, aux développeurs dans leurs applications et aux concepteurs dans leurs maquettes ou prototypes.

Licences

Nous mettons ces icônes à votre disposition afin que vous puissiez les incorporer dans vos produits sous la licence Apache version 2.0. N'hésitez pas à remixer et à repartager ces icônes et documentation dans vos produits. Nous aimerions que l'attribution s'affiche sur l'écran about de votre application, mais ce n'est pas obligatoire.

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

L'ensemble complet des icônes Material est disponible dans la bibliothèque d'icônes Material. Les icônes peuvent être téléchargées au format SVG ou PNG, dans des formats adaptés aux projets Web, Android et iOS, ou à inclure dans des outils de conception.

Téléchargement intégral

Récupérez la dernière archive ZIP stable (environ 310 Mo) contenant toutes les icônes ou la version de pointe du fichier maître.

Dépôt Git

Les icônes Material sont disponibles dans le dépôt git qui contient l'ensemble des icônes, y compris tous les différents formats que nous proposons.

$ git clone https://github.com/google/material-design-icons/

Police des icônes pour le Web

La police des icônes Material est le moyen le plus simple d'intégrer des icônes Material aux projets Web. Nous avons empaqueté toutes les icônes Material dans une seule police qui tire parti des fonctionnalités de rendu typographique des navigateurs modernes, afin que les développeurs Web puissent facilement intégrer ces icônes avec seulement quelques lignes de code.

L'utilisation de la police n'est pas seulement la méthode la plus pratique, mais elle est aussi efficace et élégante:

  • Plus de 900 icônes, le tout dans un seul petit fichier.
  • Diffusée à partir de serveurs Google Web Font ou peut être auto-hébergée.
  • Compatible avec tous les navigateurs Web récents.
  • Ils sont colorés, dimensionnés et entièrement positionnés en CSS.
  • Basé sur les vecteurs: un rendu optimal à n'importe quelle échelle, écrans Retina et écrans basse résolution.

La police d'icône ne pèse que 42 Ko dans son plus petit format Woff2 et 56 Ko au format Woff standard. En comparaison, la taille des fichiers SVG compressés avec gzip est généralement d'environ 62 Ko, mais elle peut être considérablement réduite en compilant uniquement les icônes dont vous avez besoin dans un seul fichier SVG avec des sprites de symboles.

Méthode de configuration 1. Utiliser via 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. Il vous suffit d'inclure une seule ligne de code HTML:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

Comme pour les autres polices Web Google, le CSS approprié est utilisé pour activer la police "Material Icons" spécifique au navigateur. Une classe CSS supplémentaire sera déclarée : .material-icons. Tout élément qui utilise cette classe dispose du code CSS approprié pour afficher ces icônes à partir de la police Web.

Méthode de configuration 2. Auto-hébergement

Si vous souhaitez héberger vous-même la police Web, une configuration supplémentaire est nécessaire. Hébergez la police de l'icône à un emplacement, par exemple https://example.com/material-icons.woff, et ajoutez la règle CSS suivante:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

En outre, les règles CSS relatives à l'affichage de l'icône doivent être déclarées pour afficher la police correctement. Ces règles sont généralement intégrées à la feuille de style Google Web Font, mais vous devez les inclure manuellement dans vos projets lors de l'auto-hébergement de la police:

.material-icons {
  font-family: 'Material Icons';
  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;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

Utilisation des icônes en HTML

Il est facile d'intégrer des icônes à votre page Web. Voici un petit exemple:

visage

<span class="material-icons">face</span>

Cet exemple utilise une fonctionnalité typographique appelée ligatures, qui permet d'afficher un glyphe d'icône simplement en utilisant son nom textuel. Le remplacement est effectué automatiquement par le navigateur Web et fournit un code plus lisible que la référence à caractères numériques équivalente.

Cette fonctionnalité est compatible avec la plupart des navigateurs récents sur les ordinateurs et les appareils mobiles.

Navigateur Version compatible avec les ligatures
Google Chrome ; 11
Mozilla Firefox 3.5
Apple Safari 5
Microsoft IE 10
Microsoft Edge 18
Opera 15
Apple MobileSafari iOS 4.2
Navigateur Android 3.0

Pour les navigateurs qui ne prennent pas en charge les ligatures, utilisez des références de caractères numériques pour spécifier les icônes, comme dans l'exemple ci-dessous:

Normal
<span class="material-icons">&#xE87C;</span>

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

Appliquer un style aux icônes dans Material Design

Ces icônes ont été conçues conformément aux consignes Material Design. Leur apparence est optimale lorsque vous utilisez les tailles et couleurs recommandées. Les styles ci-dessous permettent d'appliquer facilement les tailles, couleurs et états d'activité recommandés.

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

Taille

Bien que les icônes de la police puissent être mises à l'échelle à n'importe quelle taille, conformément aux consignes relatives aux icônes Material Design, nous vous recommandons de les afficher au format 18, 24, 36 ou 48 pixels. La valeur par défaut est 24 px.

Règles CSS applicables aux consignes standards de taille du Material Design:

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

Un format optimal des icônes Material est de 24 pixels. Toutefois, si une icône doit être affichée dans une autre taille, il peut être utile d'utiliser les règles CSS ci-dessus:

18px
<span class="material-icons md-18">face</span>
24px
<span class="material-icons md-24">face</span>
36 px
<span class="material-icons md-36">face</span>
48 px
<span class="material-icons md-48">face</span>

Coloriage

L'utilisation de la police d'icône permet de styliser facilement une icône dans n'importe quelle couleur. Conformément aux consignes relatives aux icônes Material Design, nous recommandons d'utiliser du noir à 54% d'opacité ou du blanc à 100% d'opacité pour les icônes actives sur des fonds clairs ou sombres, respectivement. (si une icône est désactivée ou inactive, noir à 26% ou blanc à 30% pour les arrière-plans clairs et sombres, respectivement) ;

Voici quelques exemples, qui utilisent les styles CSS Material décrits ci-dessus:

.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

Exemple de dessin d'une icône sur un fond clair avec une couleur de premier plan sombre:

Normal
<span class="material-icons md-dark">face</span>
Désactivé
<span class="material-icons md-dark md-inactive">face</span>

Exemple de dessin d'une icône sur un arrière-plan sombre avec une couleur de premier plan claire:

Normal
<span class="material-icons md-light">face</span>
Désactivé
<span class="material-icons md-light md-inactive">face</span>

Pour définir une couleur d'icône personnalisée, définissez une règle CSS spécifiant la couleur souhaitée pour la police:

.material-icons.orange600 { color: #FB8C00; }

Ensuite, utilisez la classe pour faire référence à l'icône:

Normal
<span class="material-icons orange600">face</span>

Images d'icônes pour le Web

Les icônes Material sont également disponibles sous forme d'images standards, aux formats PNG et SVG.

SVG

Les icônes Material sont fournies sous forme de fichiers SVG, adaptés aux projets Web. Les icônes individuelles peuvent être téléchargées à partir de la bibliothèque d'icônes Material. Les SVG sont également disponibles à partir du dépôt git des icônes Material Design sous le chemin d'accès:

material-design-icons/src/

Par exemple, les icônes de cartes se trouvent dans src/maps:

material-design-icons/src/maps/

Si plusieurs icônes sont utilisées sur un site Web, il est recommandé de créer des feuilles de sprites à partir des images. Pour en savoir plus, consultez la documentation dans le répertoire des sprites du dépôt git.

PNG

Le format PNG est le moyen le plus traditionnel d'afficher des icônes sur le Web. Les téléchargements effectués à partir de la bibliothèque d'icônes Material proposent des densités simples et doubles pour chaque icône. Elles sont appelées respectivement 1x et 2x dans le téléchargement. Des icônes sont également disponibles dans le dépôt Git sous:

material-design-icons/png/

Si plusieurs icônes sont utilisées sur un site Web, il est recommandé de créer des feuilles de sprites à partir des images. Pour en savoir plus, consultez les recommandations dans le répertoire des sprites du dépôt git.

Icônes pour Android

Les fichiers PNG adaptés à Android sont disponibles dans la bibliothèque d'icônes Material. Elles sont disponibles dans toutes les densités d'écran compatibles, elles doivent donc s'adapter à n'importe quel appareil.

Les icônes sont également disponibles dans le dépôt Git d'icônes Material Design, dans la même combinaison de couleurs et de tailles, comme suit:

Actuellement, le drawable vectoriel n'est disponible qu'en tant qu'icône noire de 24 dp. Cela permet d'assurer la compatibilité avec notre taille d'icône la plus standard. Pour afficher l'icône dans une autre couleur, utilisez la teinte des drawables disponible sur Android Lollipop.

Lorsque vous utilisez un drawable vectoriel, il n'est peut-être pas nécessaire d'inclure le fichier PNG de densité xxxhdpi, car il est peu probable qu'un appareil compatible avec cette densité d'écran ne soit pas compatible avec les drawables vectoriels.

Icônes pour iOS

Les icônes Material fonctionnent également bien dans les applications iOS. Dans la bibliothèque d'icônes Material et dans le dépôt git, ces icônes sont empaquetées dans des ensembles d'images Xcode, qui fonctionnent facilement avec les catalogues d'éléments Xcode (xcassets). Vous pouvez ajouter ces ensembles d'images à n'importe quel catalogue d'éléments Xcode en les faisant glisser dans Xcode vers le catalogue d'éléments ou en copiant le dossier dans le dossier xcasset.

Ensemble d&#39;images iOS

L'ensemble d'images contient des images à densité simple, double et triple (1x, 2x, 3x) afin qu'elles fonctionnent sur toutes les densités d'écran iOS connues. Des icônes noires et blanches sont fournies, mais nous vous recommandons d'utiliser la méthode imageWithRenderingMode de UIImage avec UIImageRenderingModeAlwaysTemplate. Cela permettra d'utiliser l'image comme masque alpha pouvant être teinté dans n'importe quelle couleur possible.

Exemple Objectif-C:

UIButton *button = [[UIButton alloc] init];
UIImage *closeImage =
    [[UIImage imageNamed:@"ic_close"]
       imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
button.tintColor = [UIColor colorWithWhite:0 alpha:0.54f];
[button setImage:closeImage forState:UIControlStateNormal];

Exemple avec Swift:

let button = UIButton()
let closeImage = UIImage(named:"ic_close")?.imageWithRenderingMode(
    UIImageRenderingMode.AlwaysTemplate)
button.tintColor = UIColor(white:0, alpha:0.54)
button.setImage(closeImage, forState:UIControlState.Normal)

Icônes se lisant de droite à gauche

Les langues comme l'arabe et l'hébreu se lisent de droite à gauche. Pour les langues qui se lisent de droite à gauche, les interfaces utilisateur doivent être mises en miroir pour afficher la plupart des éléments dans ce langage. Lorsqu'une interface utilisateur est mise en miroir pour l'orientation de droite à gauche, certaines icônes doivent également l'être. Lorsque le texte, la mise en page et l'iconographie sont mis en miroir pour prendre en charge les interfaces utilisateur de droite à gauche, tout ce qui concerne le temps doit être décrit comme se déplaçant de droite à gauche. Par exemple, avancez vers la gauche et reculez vers la droite. Toutefois, gardez à l'esprit que le contexte dans lequel l'icône est placée détermine également si elle doit être mise en miroir ou non.

Les icônes ne doivent être mises en miroir que si leur direction correspond aux autres éléments de l'interface utilisateur en mode d'affichage de droite à gauche. Lorsqu'une icône représente les caractéristiques visuelles de votre site Web qui sont différentes selon l'orientation de droite à gauche, elle doit également s'afficher de droite à gauche. Par exemple, si les numéros d'une liste numérotée se trouvent à droite dans une langue qui se lit de droite à gauche, ils doivent se trouver à droite de l'icône en miroir.

Icônes de droite à gauche sur Android

Cet article pour les développeurs Android décrit en détail comment implémenter les interfaces utilisateur qui se lisent de droite à gauche. Par défaut, sur Android, les icônes ne sont pas dupliquées lorsque la direction de la mise en page est dupliquée. Si nécessaire, vous devez mettre en miroir spécifiquement les icônes appropriées, soit en fournissant des ressources spécialisées pour les langues qui se lisent de droite à gauche, soit en utilisant les fonctionnalités du framework pour mettre en miroir ces éléments.

Afin de fournir des éléments spécialisés pour les langues qui se lisent de droite à gauche, vous pouvez utiliser le qualificatif ldrtl sur les répertoires de ressources, tels que res/drawable-ldrtl/. Les ressources contenues dans ces répertoires ne seront utilisées que pour les langues qui se lisent de droite à gauche. Pour les appareils exécutant l'API Android 19 ou une version ultérieure, le framework fournit également l'attribut autoMirrored pour les drawables. Lorsque cet attribut est défini sur "true", le drawable est automatiquement mis en miroir dans les langues qui se lisent de droite à gauche.

Avec la mise en miroir automatique:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0"
        android:tint="?attr/colorControlNormal"
        android:autoMirrored="true">
  <path
        android:fillColor="@android:color/white"
        android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,
                          8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>

Si vous n'avez pas la possibilité d'utiliser la mise en miroir automatique ou de fournir d'autres ressources drawable, vous pouvez également utiliser l'attribut ImageView scaleX pour mettre en miroir des drawables (par exemple, en fournissant une mise en page spécifique à la lecture de droite à gauche dans un répertoire res/layout-ldrtl).

Mise en miroir dans le fichier de mise en page:

<ImageView
    android:id="@+id/my_icon"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:scaleX="-1" />

Enfin, les drawables peuvent être mis en miroir de manière programmatique.

Vérifiez manuellement la direction de la mise en page à l'aide de getLayoutDirection:

if (ViewCompat.getLayoutDirection(view) == ViewCompat.LAYOUT_DIRECTION_RTL) {
  // custom code
}

Pour mettre en miroir le contenu d'ImageView par programmation:

imageView.setScaleX(-1);

Icônes de droite à gauche sur iOS

iOS s'appuie sur le concept d'UISemanticContentAttribute associé à chaque vue. Il peut s'agir de unspecified, forceLeftToRight, forceRightToLeft, playback ou spatial. iOS utilise cette valeur et le paramètre (LTR)/RTL de l'appareil présentant l'interface pour déterminer la valeur effectiveLayoutDirection de la vue. Ce paramètre effectiveLayoutDirection détermine si une image doit être mise en miroir ou non lorsqu'elle est affichée.

Par défaut, le contenu sémantique des images est défini sur unspecified. Elles sont alors mises en miroir en mode d'affichage de droite à gauche. Si vous ne souhaitez pas qu'une icône soit mise en miroir, vous devez la définir explicitement sur forceLeftToRight. Apple souligne certaines exceptions qui ne doivent pas être dupliquées, comme la lecture de contenus multimédias (avance rapide, retour arrière, etc.), les notes de musique, les images indiquant un passage dans le temps, etc.

Exemple Objectif-C:

// Prevent an icon from being mirrored in RTL mode
UIImage *icon = [UIImage imageNamed:@"my_icon.png"];
UIImageView *iconView = [[UIImageView alloc] initWithImage:icon];
iconView.semanticContentAttribute =
  UISemanticContentAttributeForceLeftToRight;

Exemple avec Swift:

// Prevent an icon from being mirrored in RTL mode
let iconImage = UIImage.init(named: "my_icon.png")
let iconView = UIImageView.init(image: iconImage)
iconView.semanticContentAttribute = .forceLeftToRight;

Pour obtenir une documentation plus détaillée sur l'implémentation de cette fonctionnalité sous iOS et macOS, consultez la documentation d'Apple dédiée à ce type d'orientation.

Le contenu sémantique a été ajouté dans iOS 9. Si vous êtes compatible avec des versions antérieures d'iOS, le framework d'internationalisation de Material rétroporte certaines fonctionnalités vers iOS 8.

Icônes de droite à gauche sur le Web

Nous vous recommandons de lire l'article suivant pour en savoir plus sur la lecture de droite à gauche sur le Web: https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1 https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2

Sur le Web, par défaut, les icônes ne sont pas dupliquées lorsque la direction de la mise en page est mise en miroir. Vous devez dupliquer spécifiquement les icônes appropriées si nécessaire.

L'exemple ci-dessous montre comment implémenter une règle CSS simple pour lire de droite à gauche. Vous pouvez également l'afficher sur Codepen.

page.html

<html dir="rtl">
  <img class="material-icons" src="my_icon.png" alt="my icon"/>
</html>

page.css

html[dir="rtl"] .icon {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

Générer vos propres icônes de droite à gauche avec ImageMagick

Si vous ne pouvez pas dupliquer les icônes dans le code, vous pouvez utiliser ImageMagick pour mettre en miroir horizontalement l'image.

convert -flop my_icon.png my_icon_rtl.png

Quelles icônes doivent être mises en miroir pour les langues qui se lisent de droite à gauche ?

Voici une liste d'icônes qui peuvent être mises en miroir de manière programmatique en lecture de droite à gauche:
Flèche vers l'arrière Flèche vers l'arrière sur iOS Flèche vers l'avant
Flèche vers l'avant (iOS) Flèche vers la gauche Flèche vers la droite
Devoir de Rendu d'un devoir de Retour arrière de
: batterie inconnue appel passé Fusion d'appels de
appel manqué appel manqué sortant appel reçu
appel partagé chevron gauche chevron vers la droite
mode lecteur Chrome appareil inconnu dVR
note d'événement liste de lecture sélectionnée vidéo sélectionnée
première page Vol de atterri Décollage du vol de
: réduction du retrait du format Augmentation du retrait du format Liste de formats à puces
Avancement de  fonction Données saisies :
onglet du clavier  libellé libellé important
Contour du libellé dernière page Lancement de
 liste Aide en direct de partage d'écran sur mobile
Graphique multiligne : naviguer avant : naviguer vers l'élément suivant
la semaine prochaine note : ouvrir dans une nouvelle fenêtre
ajout à une playlist file d'attente de musique répéter
 réponse répondre à tous partage d'écran
Envoi de texte court : afficher le graphique
tri Demi-étoile de sujet
: tendance stable toc : tendance à la baisse
: tendance à la hausse Annuler vue liste
Afficher le dessus-de-lit Retour à la ligne automatique