Comment utiliser les nouveaux thèmes d'icônes Material Design : Contour, Arrondi, Bicolore et Pointu ?

Question

Google a réorganisé son Icônes de conception matérielle avec 4 nouveaux thèmes prédéfinis :

Contour, arrondi, bicolore et tranchant en plus de l'ordinaire Rempli/Baseline thème :

---

Mais, malheureusement, il n'est indiqué nulle part comment utiliser les nouveaux thèmes.

---

J'ai été en l'utilisant via Google Web Fonts en incluant le lien :

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

Et ensuite en utilisant l'icône requise comme suggéré dans la documentation :

<i class="material-icons">account_balance</i>

Mais il affiche toujours la version "remplie/de base".

---

J'ai essayé de faire ce qui suit pour utiliser l'option Aperçu de à la place :

<i class="material-icons">account_balance_outlined</i>
<i class="material-icons material-icons-outlined">account_balance</i>

et, en changeant le lien Web Fonts en :

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

etc. Mais ça ne marche pas.

---

Et ça ne sert à rien de prendre des risques comme ça.

---

tl;dr : Quelqu'un a-t-il essayé d'utiliser les nouveaux thèmes ? Est-ce qu'ils fonctionnent comme la version de base (balise html en ligne) ? Ou bien, sont-ils uniquement destinés à être téléchargés aux formats SVG ou PNG ?

Answer 1

Mise à jour (31/03/2019) : tous les thèmes d'icônes fonctionnent via Google Web Fonts désormais.

Comme l'a souligné Edric, il suffit d'ajouter le lien google web fonts dans l'en-tête de votre document maintenant, comme ceci :

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

Et ensuite, ajouter la classe correcte pour afficher l'icône d'un thème particulier.

<i class="material-icons">donut_small</i>
<i class="material-icons-outlined">donut_small</i>
<i class="material-icons-two-tone">donut_small</i>
<i class="material-icons-round">donut_small</i>
<i class="material-icons-sharp">donut_small</i>

La couleur des icônes peut également être modifiée à l'aide de CSS.

Remarque : les icônes du thème bicolore sont un peu défaillantes pour le moment.

---

Mise à jour (14/11/2018) : liste des 16 icônes de contour qui fonctionnent avec le suffixe "_outline".

Voici la liste la plus récente de 16 icônes de contour qui fonctionnent avec la police de caractères Material-icons Webfont, en utilisant l'approche de l'utilisateur. _outline (testé et confirmé).

(Comme on le trouve sur le page github de material-design-icons . Recherchez : " _outline_24px.svg ")

<i class="material-icons">help_outline</i>
<i class="material-icons">label_outline</i>
<i class="material-icons">mail_outline</i>
<i class="material-icons">info_outline</i>
<i class="material-icons">lock_outline</i>
<i class="material-icons">lightbulb_outline</i>
<i class="material-icons">play_circle_outline</i>
<i class="material-icons">error_outline</i>
<i class="material-icons">add_circle_outline</i>
<i class="material-icons">people_outline</i>
<i class="material-icons">person_outline</i>
<i class="material-icons">pause_circle_outline</i>
<i class="material-icons">chat_bubble_outline</i>
<i class="material-icons">remove_circle_outline</i>
<i class="material-icons">check_box_outline_blank</i>
<i class="material-icons">pie_chart_outlined</i>

Notez que graphique circulaire doit être " pie_chart_ décrit " et non aperçu .

---

Il s'agit d'un hack pour tester les nouveaux thèmes d'icônes en utilisant une balise en ligne. Ce n'est pas la solution officielle.

En ce jour (19 juillet 2018), cela fait un peu plus de 2 mois que les nouveaux thèmes d'icônes ont été introduits, il n'y a pas moyen pour inclure ces icônes en utilisant une balise en ligne <i class="material-icons"></i> .

+Martin a signalé qu'il y a un problème soulevé sur Github à ce sujet : https://github.com/google/material-design-icons/issues/773

Donc, jusqu'à ce que Google trouve une solution à ce problème, j'ai commencé à utiliser une astuce pour inclure ces nouveaux thèmes d'icônes dans mon site Web. environnement de développement avant de télécharger les icônes appropriées au format SVG ou PNG. Et j'ai pensé que je devais le partager avec vous tous.

---

IMPORTANT : Ne l'utilisez pas dans un environnement de production, car chacun des fichiers CSS inclus provenant de Google fait plus de 1 Mo.

---

Google utilise ces feuilles de style pour présenter les icônes sur sa page de démonstration :

Aperçu :

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

Arrondi :

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css">

Deux tons :

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/twotone.css">

Aiguisé :

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">

Chacun de ces fichiers contient les icônes des thèmes respectifs inclus en tant qu'images d'arrière-plan (données image Base64). Voici comment nous pouvons l'utiliser pour tester la compatibilité d'une icône particulière dans notre conception avant de la télécharger pour l'utiliser dans l'environnement de production.

---

ÉTAPE 1 :

Incluez la feuille de style du thème que vous voulez utiliser. Ex : Pour le thème 'Outlined', utilisez la feuille de style 'outline.css'.

ÉTAPE 2 :

Ajoutez les classes suivantes à votre propre feuille de style :

.material-icons-new {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
}

.icon-white {
    webkit-filter: contrast(4) invert(1);
    -moz-filter: contrast(4) invert(1);
    -o-filter: contrast(4) invert(1);
    -ms-filter: contrast(4) invert(1);
    filter: contrast(4) invert(1);
}

ÉTAPE 3 :

Utilisez l'icône en ajoutant les éléments suivants classes à la <i> étiquette :

1. material-icons-new classe

2. Nom de l'icône tel qu'il apparaît sur la page de démonstration des icônes matérielles, précédé du nom du thème suivi d'un trait d'union.

Préfixes :

Souligné : outline-

Arrondi : round-

Deux tons : twotone-

Aiguisé : sharp-

Par exemple (pour l'icône "annonce") :

outline-announcement , round-announcement , twotone-announcement , sharp-announcement

3) Utiliser une 3ème classe optionnelle icon-white pour inverser la couleur du noir au blanc (pour les fonds sombres)

---

Modification de la taille de l'icône :

Puisqu'il s'agit d'une image d'arrière-plan et non d'une icône de police, utilisez la balise height et width de CSS pour modifier la taille des icônes. La valeur par défaut est fixée à 24px dans la propriété material-icons-new classe.

---

Exemple :

Cas I : Pour le Aperçu de Thème de la cercle de compte icône :

1. Inclure la feuille de style :

   <link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

2. Ajoutez la balise icône sur votre page :

   <i class="material-icons-new outline-account_circle"></i>

Facultatif (pour les fonds sombres) :

<i class="material-icons-new outline-account_circle icon-white"></i>

---

Cas II : Pour le Pointu Thème de la évaluation icône :

1. Inclure la feuille de style :

   <link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">

2. Ajoutez la balise icône sur votre page :

   <i class="material-icons-new sharp-assessment"></i>

(Pour les fonds sombres) :

<i class="material-icons-new sharp-assessment icon-white"></i>

---

Je ne saurais trop insister sur le fait que ce n'est PAS LA VOIE à suivre pour inclure les icônes dans votre environnement de production. Mais si vous devez parcourir plusieurs icônes sur votre page en développement, cette méthode facilite l'inclusion des icônes et vous fait gagner beaucoup de temps.

Le téléchargement de l'icône au format SVG ou PNG est certainement une meilleure option lorsqu'il s'agit d'optimiser la vitesse du site, mais les icônes de police sont un gain de temps lorsqu'il s'agit de la phase de prototypage et de vérifier si une icône particulière va avec votre conception, etc.

---

Je mettrai à jour cet article si et quand Google trouvera une solution à ce problème qui n'implique pas le téléchargement d'une icône à utiliser.

Answer 2

Pour les matériaux angulaires, vous devez utiliser l'entrée fontSet pour modifier la famille de polices :

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet" />

<mat-icon>edit</mat-icon>
<mat-icon fontSet="material-icons-outlined">edit</mat-icon>
<mat-icon fontSet="material-icons-two-tone">edit</mat-icon>
...

Answer 3

Depuis le 27 février 2019, il existe des polices CSS pour les nouveaux thèmes Material Icon.

Toutefois, vous devez créer des classes CSS pour utiliser ces polices.

Les familles de polices sont les suivantes :

• Material Icons Outlined - Icônes soulignées
• Material Icons Two Tone - Icônes bicolores
• Material Icons Round - Icônes arrondies
• Material Icons Sharp - Des icônes nettes

Voir l'exemple de code ci-dessous pour un exemple :

body {
  font-family: Roboto, sans-serif;
}

.material-icons-outlined,
.material-icons.material-icons--outlined,
.material-icons-two-tone,
.material-icons.material-icons--two-tone,
.material-icons-round,
.material-icons.material-icons--round,
.material-icons-sharp,
.material-icons.material-icons--sharp {
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.material-icons-outlined,
.material-icons.material-icons--outlined {
  font-family: 'Material Icons Outlined';
}

.material-icons-two-tone,
.material-icons.material-icons--two-tone {
  font-family: 'Material Icons Two Tone';
}

.material-icons-round,
.material-icons.material-icons--round {
  font-family: 'Material Icons Round';
}

.material-icons-sharp,
.material-icons.material-icons--sharp {
  font-family: 'Material Icons Sharp';
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons material-icons--outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons material-icons--two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons material-icons--round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons material-icons--sharp">assignment</i>
  </section>
</body>

</html>

Ou consultez-le sur Codepen

---

EDIT : Depuis le 10 mars 2019, il semble qu'il existe désormais des classes pour les nouvelles icônes de police :

body {
  font-family: Roboto, sans-serif;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons-outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons-two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons-round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons-sharp">assignment</i>
  </section>
</body>

</html>

EDIT #2 : Voici une solution de contournement pour teinter les icônes bicolores en utilisant Filtres d'image CSS (code adapté de ce commentaire ) :

body {
  font-family: Roboto, sans-serif;
}

.material-icons-two-tone {
  filter: invert(0.5) sepia(1) saturate(10) hue-rotate(180deg);
  font-size: 48px;
}

.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp {
  color: #0099ff;
  font-size: 48px;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons-outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons-two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons-round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons-sharp">assignment</i>
  </section>
</body>

</html>

Ou consultez-le sur Codepen

Answer 4

Si vous avez déjà icônes matérielles dans votre projet web, il suffit de mettre à jour votre référence dans le fichier html et la classe utilisée pour les icônes :

référence html :

Avant

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

Après

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet" />

classe d'icônes matérielles :

Après cela, il suffit de vérifier quel nom de classe vous utilisez :

Avant :

<i className="material-icons">weekend</i>

Après :

<i className="material-icons-outlined">weekend</i>

qui fonctionne pour moi... Pura vida !

Answer 5

Ce qui a fonctionné pour moi est d'utiliser _outline pas _outline d après le nom de l'icône.

<mat-icon>info</mat-icon>

vs

<mat-icon>info_outline</mat-icon>