material icons

icônes matérielles

Dernières polices d'icônes et CSS pour les icônes de conception matérielle auto-hébergées.

Ce package est automatiquement mis à jour, il contiendra donc toujours les dernières icônes de Google.

Pour les symboles de matériaux, voir material-symbols

Pour les SVG, voir @material-design-icons/svg

• Installation
• Usage
• Icônes disponibles

Installation

Installez la dernière version en utilisant :

npm install material-icons@latest

Remarque : Si vous effectuez une mise à niveau de 0.x vers 1.x, consultez les notes de version 1.0.0.

Usage

Importer en JS (exemple : src/index.js dans Create React App, src/main.js dans Vue CLI) :

 import 'material-icons/iconfont/material-icons.css' ;

ou importer en CSS (exemple : src/styles.css en Angular CLI) :

 @import 'material-icons/iconfont/material-icons.css' ;

ou importer en HTML :

 < link href =" /path/to/material-icons/iconfont/material-icons.css " rel =" stylesheet " >

Pour afficher une icône, utilisez l'une des méthodes suivantes :

 < span class =" material-icons " > pie_chart </ span >          <!-- Filled -->
< span class =" material-icons-outlined " > pie_chart </ span > <!-- Outlined -->
< span class =" material-icons-round " > pie_chart </ span >    <!-- Round -->
< span class =" material-icons-sharp " > pie_chart </ span >    <!-- Sharp -->
< span class =" material-icons-two-tone " > pie_chart </ span > <!-- Two Tone -->

Réduire la taille de la construction

Le material-icons.css par défaut inclut du CSS pour toutes les polices. Cela peut amener les outils de construction tels que Webpack à copier toutes les polices dans le répertoire de construction même si vous ne les utilisez pas toutes. Pour réduire la taille de la construction, importez uniquement les styles dont vous avez besoin. Par exemple, si vous n'avez besoin que d'icônes remplies et encadrées, importez filled.css et outlined.css au lieu du material-icons.css par défaut :

 - import 'material-icons/iconfont/material-icons.css';
+ import 'material-icons/iconfont/filled.css';
+ import 'material-icons/iconfont/outlined.css';

Afficher tout

Icônes	CSS	Toupet
Rempli	rempli.css	rempli.scss
Décrit	décrit.css	décrit.scss
Rond	rond.css	rond.scss
Pointu	Sharp.css	Sharp.scss
Deux tons	bicolore.css	bicolore.scss

Utiliser Sass

Importer dans Sass (exemple : src/styles.scss dans Angular CLI) :

 @import ' material-icons/iconfont/material-icons.scss ' ;

Variables Sass disponibles :

 $material-icons-font-path : ' ./ ' !default ;
$material-icons-font-size : 24 px !default ;
$material-icons-font-display : block !default ;

Si vous obtenez des erreurs avec webpack ou Vue CLI, ajoutez cette ligne avant d'importer :

 $material-icons-font-path : ' ~material-icons/iconfont/ ' ;

Utilisation mat-icon angulaire

Pour afficher une icône, utilisez l'une des méthodes suivantes :

 < mat-icon > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-outlined " > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-round " > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-sharp " > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-two-tone " > pie_chart </ mat-icon >

Utiliser des classes CSS

Alternativement, vous pouvez utiliser des classes CSS au lieu de ligatures pour afficher les icônes. Apprendre encore plus

Icônes disponibles

Voir démo.

Licence

Les icônes de conception matérielle sont créées par Google.

Nous avons mis ces icônes à votre disposition pour que vous puissiez les intégrer dans vos produits sous la licence Apache version 2.0. N'hésitez pas à remixer et re-partager ces icônes et documentations dans vos produits. Nous aimerions que l'attribution apparaisse dans l'écran À propos de votre application, mais ce n'est pas obligatoire.