Icônes de base
Pour utiliser les icônes Google, ajoutez la ligne suivante dans le <head> de votre page HTML:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Remarque: Aucun téléchargement ou d' installation est nécessaire!
Ajoutez le material-icons classe à un élément en ligne et insérer le nom de l'icône:
Exemple
Le code suivant:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons"
style="font-size:48px;">cloud</i>
<i class="material-icons"
style="font-size:60px;color:red;">cloud</i>
</body>
</html>
Résulte en:
cloud
cloud
cloud Try It Yourself » icônes Google sont conçus pour être utilisés avec des éléments en ligne. Le <i> et <span> éléments sont largement utilisés pour les icônes.
Remarque: Les icônes sont des matériaux 24px par défaut.
Notez également que si vous changez la couleur du récipient de l'icône, la couleur de l'icône change aussi. Mêmes choses va pour l'ombre, et tout ce qui se fait hérité en utilisant le CSS. L'exception est la propriété CSS font-size, qui est toujours 24px, à moins que quelque chose d'autre est spécifié.
Icônes Sizable
Bien que les icônes matérielles peuvent être redimensionnées à toutes les tailles, la taille de police recommandée est soit 18, 24, 36 ou 48px:
Exemple
Le code suivant:
<style>
/* Rules for icon sizes: */
.material-icons.md-18 { font-size:
18px; }
.material-icons.md-24 { font-size:
24px; } /* Default */
.material-icons.md-36 { font-size:
36px; }
.material-icons.md-48 { font-size:
48px; }
</style>
<i class="material-icons md-18">cloud</i>
<i class="material-icons
md-24">cloud</i>
<i class="material-icons md-36">cloud</i>
<i class="material-icons
md-48">cloud</i>Résulte en:
cloud
cloud
cloud
cloud
Try It Yourself »