web-dev-qa-db-fra.com

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

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

Décrit, arrondi, deux tons et forte, en plus du thème régulier Rempli/Baseline: 

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

J'ai utilisé avec 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 montre toujours la version "Rempli/Baseline".

J'ai essayé d'utiliser les éléments suivants pour utiliser le thème Outlined: 

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

et en modifiant le lien Polices Web sur:

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

etc. Mais ça ne marche pas.

Et il n'y a aucun intérêt à prendre des photos dans le noir comme ça.

tl; dr: Quelqu'un a-t-il déjà essayé d'utiliser les nouveaux thèmes? Fonctionne-t-il même comme la version de base (balise HTML intégrée)? Ou bien, est-ce seulement destiné à être téléchargé au format SVG ou PNG?

Merci d'avance.

iconsmaterial-designgoogle-material-icons
59
Aj334

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

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

(Tel que trouvé sur la 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 pie_chart doit être "pie_chart _souligné" et non pas contour.

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

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

+ Martin a signalé qu’un problème avait été soulevé à propos de Github: https://github.com/google/material-design-icons/issues/773

Donc, jusqu'à ce que Google propose une solution à ce problème, 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 je pensais que je le partagerais avec vous tous.

IMPORTANT: ne l'utilisez pas dans un environnement de production car chacun des fichiers CSS inclus à partir de Google fait plus de 1 Mo de taille.

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 en tant qu'images d'arrière-plan (données image Base64). Et voici comment nous pouvons utiliser cela 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 souhaitez utiliser . Exemple: pour le thème "Décrit", utilisez la feuille de style correspondant à "contour.css".

ÉTAPE 2:

Ajoutez les classes suivantes à votre feuille de style propre:

.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 balise <i>: 

1) material-icons-new classe 

2) Nom de l’icône tel qu’indiqué sur la page de démonstration d’icônes de matériel, précédé du nom du thème suivi d’un trait d’union. 

Préfixes: 

Décrit: outline-

Arrondi: round-

Deux tons: twotone-

Sharp: sharp-

Eg (pour l'icône 'annonce'):

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

3) Utilisez un icon-white de 3e classe facultatif pour inverser la couleur du noir au blanc (pour les arrière-plans sombres)

Changer la taille de l'icône:

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

Exemple: 

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

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 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 Sharp Thème de l'icône évaluation:

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 icon 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 BON MOYENNE d'inclure les icônes dans votre environnement de production. Toutefois, si vous devez parcourir plusieurs icônes sur votre page en développement, cela facilite grandement 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 une meilleure option pour l'optimisation de la vitesse du site, mais les polices-icônes permettent de gagner du temps en phase de prototypage et de vérifier si une icône particulière convient à votre conception, etc.

_ {Je mettrai à jour cet article si et quand Google propose une solution à ce problème n'impliquant pas le téléchargement d'une icône.

25
Aj334

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

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

contre 

<mat-icon>info_outline</mat-icon>
8
fxrxz

Si vous avez déjà des icônes de matériau 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 de matériau:

Après cela, vérifiez simplement quel className utilisez-vous:

Avant:

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

Après:

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

ça marche pour moi ... Pura vida!

5
rocaes90

De nouveaux thèmes ne font probablement pas (encore?) Partie de la police Material Icons . https://github.com/google/material-design-icons/issues/773

5
Martin

La récente modification 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 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>
1
lakshmeesha

J'étais insatisfait du fait que, jusqu'à ce que je sache, Google n'ait pas encore publié ses nouveaux modèles sous forme de jeu d'icônes de police ou svg. Par conséquent, j'ai mis en place un petit paquet 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 base de registre. Cela prend également en charge l’agitation, dans la mesure où seules les icônes que vous souhaitez et/ou dont vous avez réellement besoin sont ajoutées à votre projet.

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

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

De manière 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>

 red round warning material icon in safari 

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

0
Kyle Snow Schwartz

J'ai fini par utiliser l'application IcoMoon pour créer une police personnalisée en utilisant uniquement les nouvelles icônes thématiques requises pour une version récente d'une application Web. Ce n'est pas parfait, mais vous pouvez très bien imiter les fonctionnalités de Google Font existantes 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 le thème entier à l'aide d'IcoMoon. Bon sang, IcoMoon a probablement un processus interne qui faciliterait les choses, car ils ont déjà défini les icônes de matériau d'origine dans leur bibliothèque.

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

0
Lee Martin

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

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 à deux tons
  • Material Icons Round - Icônes arrondies
  • Material Icons Sharp - Icônes pointues

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

0
Edric

Pour le matériel angular, 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>
...
0
Ron Netzer

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

Ensuite, 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 Angular Material:

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