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

Contour, arrondi, bicolore et net , en plus du thème normal Rempli / Baseline :

Mais, malheureusement, il ne dit nulle part comment utiliser les nouveaux thèmes.

Je l' utilise via Google Web Fonts en incluant le lien:

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

Et puis 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 «Rempli / Baseline».

J'ai essayé de faire ce qui suit pour utiliser le thème Outlined à la place:

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

et, en modifiant le lien Web Fonts pour:

<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 photos dans le noir comme ça.

tl; dr: Quelqu'un a-t-il essayé d'utiliser les nouveaux thèmes? Cela fonctionne-t-il même comme la version de base (balise html en ligne)? Ou est-il uniquement destiné à être téléchargé au format SVG ou PNG?

Merci d'avance.

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

Comme l'a souligné Edric, il suffit maintenant d'ajouter le lien des polices web google dans la tête de votre document, 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 puis en ajoutant 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 en utilisant CSS.

Remarque: les icônes de thème à deux tons sont un peu glitch pour le moment.

Mise à jour (14/11/2018): Liste de 16 icônes de contour fonctionnant avec le suffixe "_outline".

Voici la liste la plus récente de 16 icônes de contour qui fonctionnent avec la police Web standard Material-icons, en utilisant le suffixe _outline (testé et confirmé).

(Comme indiqué sur la page github des icônes de conception de matériaux . 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 pie_chart doit être « pie_chart_ décrit » et non esquisser .

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

À compter d'aujourd'hui (19 juillet 2018), un peu plus de 2 mois depuis l'introduction des nouveaux thèmes d'icônes, il n'y a aucun moyen d'inclure ces icônes à l'aide d'une balise en ligne <i class="material-icons"></i>.

+ Martin a souligné qu'il y a un problème soulevé sur Github concernant le même: https://github.com/google/material-design-icons/issues/773

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

IMPORTANT : ne l'utilisez pas dans un environnement de production car chacun des fichiers CSS inclus de Google a une taille supérieure à 1 Mo.

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

Contour:

<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">

Tranchant:

<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 comme images d'arrière-plan (données d'image Base64). Et 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 une utilisation dans l'environnement de production.

ÉTAPE 1 :

Incluez la feuille de style du thème que vous souhaitez utiliser. Par exemple: pour le thème 'Outlined', utilisez la feuille de style pour '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 classes suivantes à la <i>balise:

1) material-icons-new classe

2) Nom de l'icône tel qu'indiqué 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:

Décrit: outline-

Arrondi: round-

Deux tons: twotone-

Tranchant: sharp-

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

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

3) Utilisez une 3e classe facultative icon-whitepour inverser la couleur du noir au blanc (pour les arrière-plans 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 les propriétés heightet widthde CSS pour modifier la taille des icônes. La valeur par défaut est définie sur 24px dans la material-icons-newclasse.

Exemple:

Cas I: Pour le Décrites Thème de l' account_circle icône:

1) Incluez la feuille de style:

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

2) Ajoutez la balise icon sur votre page:

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

Facultatif (pour les arrière-plans sombres):

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

Cas II: pour le thème pointu de l' évaluation icône d' :

1) Incluez la feuille de style:

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

2) Ajoutez la balise icon sur votre page:

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

(Pour les arrière-plans 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 BONNE FAÇON d'inclure les icônes dans votre environnement de production. Mais si vous devez parcourir plusieurs icônes sur votre page de développement, cela facilite l'inclusion d'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 pour l'optimisation de la vitesse du site, mais les icônes de police vous permettent de gagner du temps lors de la phase de prototypage et de vérifier si une icône particulière correspond à votre conception, etc.

Je mettrai à jour cet article si et quand Google propose une solution à ce problème qui n'implique pas de télécharger une icône pour l'utiliser.

Depuis le 27 février 2019, il existe des polices CSS pour les nouveaux thèmes d'icônes matérielles.

Cependant, vous devez créer des classes CSS pour utiliser les polices.

Les familles de polices sont les suivantes:

• Material Icons Outlined - Icônes décrites
• Material Icons Two Tone - Icônes bicolores
• Material Icons Round - Icônes arrondies
• Material Icons Sharp - Icônes nettes

Consultez 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 regardez-le sur Codepen

EDIT: Depuis le 10 mars 2019, il semble qu'il existe maintenant 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 des 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 regardez-le sur Codepen

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>
...

Si vous avez déjà des icônes de matériaux fonctionnant dans votre projet Web, il vous 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, vérifiez simplement le nom de classe que vous utilisez:

Avant:

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

Après:

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

ça marche pour moi ... Pura vida!

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

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

contre

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

À partir du 12/05/2020, vous devez

1. inclure CSS:

<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">

2. Utilisez-le comme ceci:

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

Remarque: Par exemple, pour utiliser le style avec contour, vous devez spécifier les icônes de matériau ET les classes de contour d' icônes de matériau .

Les nouveaux thèmes ne font probablement pas (encore?) Partie de la police Material Icons. Lien .

La récente édition de l'Aj334 fonctionne parfaitement.

google CDN

<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">

Élément d'icône

<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>

Aucune des réponses jusqu'à présent n'explique comment télécharger les différentes variantes de cette police afin que vous puissiez les diffuser depuis votre propre site Web (serveur WWW).

Bien que cela puisse sembler un problème mineur du point de vue technique, c'est un gros problème du point de vue juridique, du moins si vous avez l'intention de présenter vos pages à un citoyen de l'UE (ou même, si vous le faites par accident). Cela est même vrai pour les entreprises qui résident aux États-Unis (ou dans tout pays en dehors de l'UE).

Si quelqu'un est intéressé par la raison, je vais mettre à jour cette réponse et donner plus de détails ici, mais pour le moment, je ne veux pas perdre trop d'espace hors sujet.

Cela dit:

J'ai téléchargé toutes les versions (régulières, encadrées, arrondies, nettes, bicolores) de cette police en suivant deux étapes très simples (c'est la réponse de @ Aj334 à sa propre question qui m'a mis sur la bonne voie) (exemple: "souligné " une variante):

1. Récupérez le CSS du CDN Google en laissant directement votre navigateur récupérer l'URL CSS , c'est-à-dire copiez l'URL suivante dans la barre d'adresse de votre navigateur:

   https://fonts.googleapis.com/css?family=Material+Icons+Outlined
   

   Cela renverra une page qui ressemble à ceci (au moins dans Firefox 70.0.1 au moment de la rédaction de ceci):

   /* fallback */
   @font-face {
     font-family: 'Material Icons Outlined';
     font-style: normal;
     font-weight: 400;
     src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
   }
   
   .material-icons-outlined {
     font-family: 'Material Icons Outlined';
     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;
     -moz-font-feature-settings: 'liga';
     -moz-osx-font-smoothing: grayscale;
   }
   

2. Trouvez la ligne commençant par src:dans le code ci-dessus et laissez votre navigateur récupérer l'URL contenue dans cette ligne , c'est-à-dire copiez l'URL suivante dans la barre d'adresse de votre navigateur:

   https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2
   

   Maintenant, le navigateur téléchargera ce .woff2fichier et proposera de l'enregistrer localement (du moins, Firefox l'a fait).

Deux dernières remarques:

Bien sûr, vous pouvez télécharger les autres variantes de cette police en utilisant la même méthode. Dans un premier temps, remplacez simplement la séquence de caractères Outlineddans l'URL par les séquences de caractères Round(oui, vraiment, bien qu'ici on l'appelle "Arrondi" dans le menu de navigation de gauche), SharpouTwo+Tone , respectivement. La page de résultats sera presque la même à chaque fois, mais l'URL dans lesrc: ligne est bien sûr différente pour chaque variante.

Enfin, à l'étape 1, vous pouvez même utiliser cette URL:

https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp

Cela renverra le CSS pour toutes les variantes dans une page, qui contient ensuite cinq src:lignes, chacune avec une autre URL indiquant où se trouve la police respective.

Le lien webfonts fonctionne maintenant, dans tous les navigateurs!

Ajoutez simplement vos thèmes au lien de police séparés par un tube ( |), comme ceci

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

Puis référencez la classe, comme ceci:

// class="material-icons" or class="material-icons-outlined"

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

Ce modèle fonctionnera également avec le matériau angulaire:

<mat-icon>account_balance</mat-icon>
<mat-icon class="material-icons-outlined">account_balance</mat-icon>

Mettre en tête le lien vers les styles Google

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

et dans le corps quelque chose comme ça

<i class="material-icons-outlined">bookmarks</i>

J'ai fini par utiliser l'application IcoMoon pour créer une police personnalisée en utilisant uniquement les nouvelles icônes thématiques dont j'avais besoin pour une version récente d'une application Web. Ce n'est pas parfait, mais vous pouvez imiter assez bien la fonctionnalité Google Font existante avec un peu de configuration. Voici un résumé:

https://medium.com/@leemartin/how-to-use-material-icon-outlined-rounded-two-tone-and-sharp-themes-92276f2415d2

Si quelqu'un se sent audacieux, il peut convertir l'intégralité du thème à l'aide d'IcoMoon. Bon sang, IcoMoon a probablement un processus interne qui faciliterait les choses car ils ont déjà les icônes de matériaux d'origine définies dans leur bibliothèque.

Quoi qu'il en soit, ce n'est pas une solution parfaite, mais cela a fonctionné pour moi.

Je n'étais pas satisfait du fait que jusqu'à ce que je sache, Google n'a pas encore publié ses nouveaux modèles en tant que jeu d'icônes de police ou de svg. Par conséquent, j'ai mis en place un petit package npm pour résoudre le problème.

https://www.npmjs.com/package/ts-material-icons-svg

Importez simplement les icônes que vous souhaitez utiliser et ajoutez-les à votre registre. Cela prend également en charge le tremblement des arbres, car seules les icônes que vous voulez et / ou avez vraiment besoin sont ajoutées à votre projet.

npm i --save https://github.com/MarcusCalidus/ts-material-icons-svg.git

pour utiliser deux icônes de tonalité par exemple

import {icon_edit} from 'ts-material-icons-svg/dist/twotone';

matIconRegistry.addSvgIcon(
            'edit',
            domSanitizer.bypassSecurityTrustResourceUrl(icon_edit),
        );

Dans votre modèle html, vous pouvez maintenant utiliser la nouvelle icône

<mat-icon svgIcon="edit"></mat-icon>

De manière quelque peu hilarante, Google a créé une police qui fonctionne correctement dans Safari mais pas dans Chrome. Voici le https://codepen.io/anon/pen/zbavza

<i class="material-icons-round red">warning</i>

En référence à https://stackoverflow.com/a/54902967/4740291 et ne pouvant pas changer la couleur à l'aide de css.

Configuration de la couleur bicolore:

Comme décrit ci-dessus, vous pouvez utiliser la colortouche css sauf pour les matériaux Bicolore Thème qui semble être un problème ;-)

Une solution de contournement est décrite dans l'un des nombreux problèmes de github de matériau angulaire en utilisant un filtre css personnalisé. Ce filtre personnalisé peut être généré ici .

Par exemple:

Html:

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

<i class="material-icons-two-tone red">home</i>

css:

.red {
filter: invert(8%) sepia(94%) saturate(4590%) hue-rotate(358deg) brightness(101%) contrast(112%);
}

Pièces jointes:

• Travail de Stackblitz angulaire
• Exemple de codepen
• Générateur de filtres CSS Codepen