Comment utiliser les nouveaux thèmes d'icônes de conception matérielle: contour, arrondi, bicolore et pointu?

171

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.

icons  material-design  google-material-icons 
— Ashil John
source

Réponses:

172

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.

— Ashil John
source
salut! c'est assez utile, mais je ne parviens toujours pas à inclure mon icône, je veux inclure screen_share, j'ai essayé avec la classe .outline-screen_share mais ça imprime n'importe quoi, je vérifie la classe dans l'inspecteur et elle existe, puis-je perdre n'importe quelle étape?
— cucuru
1
@cucuru Merci, je pense que vous avez manqué l' étape 2 . Ajouter d'abord la classe .material-icons-newet ses propriétés à votre propre feuille de style, puis appeler l'icône par <i class="material-icons-new outline-screen_share"></i>.
— Ashil John
1
Il semble maintenant y avoir de nouvelles polices CSS pour les nouveaux thèmes d'icônes matérielles: codepen.io/Chan4077/pen/bZNyQG
— Edric
Génial! Fonctionne comme un charme.
— Soorya
Pour le matériau angulaire, vous devez utiliser à la fontSetplace de class. Voir la réponse de Ron Netzer ci-dessous du 14/08/19.
— Russ
32

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>
Développer l'extrait

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>
Développer l'extrait

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>
Développer l'extrait

Ou regardez-le sur Codepen

— Edric
source
3
Il semble que l' colorattribut CSS n'affecte actuellement pas la couleur des nouveaux thèmes d'icônes matérielles.
— Edric
1
L'icône décrite ne fonctionne pas, c'est-à-dire?, Des pensées?
— Jismon Thomas
1
il n'apparaît pas du tout, même si vous exécutez cette page sur ie, vous pouvez voir que c'est juste un espace vide, j'ai fini par utiliser baseline sur ie!
— Jismon Thomas
Il semble que la colorpropriété est prise en charge sur toutes les icônes à l'exception des icônes à deux tons. (Testé à partir d'aujourd'hui)
— Edric
17

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>
...
— Ron
source
12

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!

— rocaes90
source
10

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>
— fxrxz
source
Ah-hah, donc ça marche comme ça sur Angular; c'est assez chouette.
— Ashil John
5
il y a des icônes qui sont des contours et qui ont le suffixe _outline. Cela ne fonctionne que pour ceux
— Sangmin Lee
@SangminLee oui, c'est la liste des icônes où cela devrait fonctionner. material.io/tools/icons/?style=outline
— fxrxz
@ Aj334 oui c'est soigné, pouvez-vous aussi accepter cette réponse si elle répond à votre question?
— fxrxz
1
Je viens de l'utiliser avec la police Web Material dans un projet React.js. Cela n'a donc rien à voir avec Angular. Je pense que c'est la solution.
— Juuro
9

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

— Vano Maisuradze
source
Pour Angular, utilisez <mat-icon class="material-icons-two-tone">alarm</mat-icon>. Remplacez la classe soit material-icons, material-icons-outlined, material-icons-two-tone, material-icons-sharpou material-icons-round. Et remplacez l'alarme par n'importe quel nom d'icône de: material.io/resources/icons/?icon=assessment&style=baseline
— Quad Coders
L'utilisation de l'icône de tapis signifie que vous ajoutez un module supplémentaire, ce qui augmente la taille de l'application (Eh bien, cela augmente un peu, mais parfois quelques Ko sont importants)
— Vano Maisuradze
@VanoMaisuradze pouvez-vous créer un lien vers le document?
— Mehulkumar le
AFAIK, il n'y a pas de doc pour ça.
— Vano Maisuradze le
5

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

— Martin
source
Ce projet n'a pas publié de sortie depuis 2 ans, je ne retiens pas mon souffle.
— Coderer
3

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>
— lakshmeesha
source
3

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.

— Binarus
source
2

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>
— intergalactique
source
Je garderai cette approche simple jusqu'à ce que la solution attributaire sort. Good one @intergalactic
— Sparker73
Que faire si j'obtiens les icônes via dependenciespackage.json de l'application au lieu de <link>? Je ne peux pas inclure les icônes décrites dans l'URL ...
— Jago
1

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>
— Володимир Лук'янюк
source
0

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.

— Lee Martin
source
0

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>
— MarcusCalidus
source
0

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:

— zerocewl
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.