Icônes matérielles

Google propose un ensemble de 750 icônes conçues selon les "directives de conception matérielle", appelées Material DesignIcônes. Ces icônes sont simples et prennent en charge tous les navigateurs Web modernes. Étant donné que ces icônes sont vectorielles, elles sont également évolutives. Pour utiliser ces icônes, nous devons charger la police (bibliothèque)material-icons.

Chargement de la police (bibliothèque)

Pour charger la bibliothèque d'icônes de matériaux, copiez et collez la ligne suivante dans la section <head> d'une page Web.

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

Utilisation de l'icône

Les icônes matérielles de Google fournissent une longue liste d'icônes. Choisissez l'un d'entre eux et ajoutez le nom de la classe d'icônes à n'importe quel élément HTML de la balise <body>. Dans l'exemple suivant, nous avons utilisé l'icône nomméeaccessibility qui appartient à la catégorie action.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
   </head>
	
   <body>
      <i class = "material-icons">accessibility</i>
   </body>
	
</html>

Il produira la sortie suivante -

Définition de la taille

Vous pouvez augmenter ou diminuer la taille d'une icône en définissant sa taille dans le CSS et en l'utilisant avec le nom de la classe comme indiqué ci-dessous. Dans l'exemple suivant, nous avons déclaré la taille 6 em.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.mysize {font-size: 6em;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons mysize">accessibility</i>
   </body>
	
</html>

Il produira la sortie suivante -

Définition de la couleur

Vous pouvez utiliser le CSS pour définir la couleur d'une icône. L'exemple suivant montre comment changer la couleur d'une icône appeléeaccessibility.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 6em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Il produira la sortie suivante -

Liste des catégories

La police Material Icons de Google fournit 519 icônes dans les catégories suivantes -

Icônes d'action
Icônes d'alerte
Icônes AV
Icônes de communication
Icônes de contenu
Icônes de l'appareil
Icônes de l'éditeur
Icônes de fichier
Icônes de matériel
Icônes d'image
Icônes de cartes
Icônes de navigation
Icônes de notification
Icônes sociales
Basculer les icônes

Pour utiliser l'une de ces icônes, vous devez remplacer le nom de classe dans les programmes donnés dans ce chapitre par le nom de classe de l'icône souhaitée. Dans les prochains chapitres de cette unité (Icônes de matériau), nous avons expliqué par catégorie l'utilisation et les sorties respectives de diverses icônes de matériau.