¿Cómo utilizar los nuevos temas del icono de diseño de materiales: contorneado, redondeado, de dos tonos y agudo?

171

Google ha renovado sus iconos de diseño de materiales con 4 nuevos temas preestablecidos:

Esbozado, redondeado, de dos tonos y agudo , además del tema regular de relleno / línea de base :

Pero, desafortunadamente, no dice en ninguna parte cómo usar los nuevos temas.

Lo he estado usando a través de Google Web Fonts al incluir el enlace:

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

Y luego usando el icono requerido como se sugiere en la documentación :

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

Pero siempre muestra la versión 'llena / línea de base'.

Intenté hacer lo siguiente para usar el tema Esbozado en su lugar:

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

y, cambiando el enlace de fuentes web a:

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

etc. Pero no funciona.

Y no tiene sentido tomar fotos en la oscuridad de esa manera.

tl; dr: ¿Alguien ha intentado usar los nuevos temas? ¿Funciona incluso como la versión de línea de base (etiqueta html en línea)? ¿O solo se debe descargar en formato SVG o PNG?

Gracias por adelantado.

icons material-design google-material-icons Ashil John
fuente

Respuestas:

171

Actualización (31/03/2019): todos los temas de iconos funcionan a través de Google Web Fonts ahora.

Como señaló Edric, ahora es solo cuestión de agregar el enlace de fuentes web de Google en la cabeza de su documento, así:

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

Y luego agregando la clase correcta para generar el ícono de un tema en particular.

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

El color de los iconos también se puede cambiar usando CSS.

Nota: los íconos de tema de dos tonos son un poco problemáticos en la actualidad.

Actualización (14/11/2018): Lista de 16 iconos de esquema que funcionan con el sufijo "_outline".

Aquí está la lista más reciente de 16 iconos de esquema que funcionan con la fuente de Web de iconos de material normal, utilizando el sufijo _outline (probado y confirmado).

(Como se encuentra en la página de github de material-design-icons . Busque: " _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>

Tenga en cuenta que pie_chart tiene que ser " pie_chart_ esbozó " y no esbozar .

Este es un truco para probar los nuevos temas de iconos usando una etiqueta en línea. No es la solución oficial.

A partir de hoy (19 de julio de 2018), hace poco más de 2 meses desde que se introdujeron los nuevos temas de iconos, no hay forma de incluir estos iconos usando una etiqueta en línea <i class="material-icons"></i>.

+ Martin ha señalado que hay un problema planteado en Github con respecto a lo mismo: https://github.com/google/material-design-icons/issues/773

Entonces, hasta que Google encuentre una solución para esto, comencé a usar un truco para incluir estos nuevos temas de iconos en mi entorno de desarrollo antes de descargar los iconos apropiados como SVG o PNG. Y pensé en compartirlo con todos ustedes.

IMPORTANTE : No utilice esto en un entorno de producción ya que cada uno de los archivos CSS incluidos de Google tiene un tamaño superior a 1 MB.

Google usa estas hojas de estilo para mostrar los íconos en su página de demostración:

Contorno:

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

Redondeado:

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

Dos tonos:

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

Agudo:

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

Cada uno de estos archivos contiene los íconos de los temas respectivos incluidos como imágenes de fondo (datos de imagen Base64). Y así es como podemos usar esto para probar la compatibilidad de un icono en particular en nuestro diseño antes de descargarlo para usarlo en el entorno de producción.

PASO 1 :

Incluya la hoja de estilo del tema que desea usar. Por ejemplo: para el tema 'Contorneado', use la hoja de estilo para 'outline.css'

PASO 2 :

Agregue las siguientes clases a su propia hoja de estilo:

.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);
}

PASO 3 :

Use el icono agregando las siguientes clases a la <i>etiqueta:

1) material-icons-newclase

2) Nombre del ícono como se muestra en la página de demostración de íconos de material, con el nombre del tema seguido de un guión.

Prefijos

Contorneado: outline-

Redondeado: round-

Dos tonos: twotone-

Agudo: sharp-

Por ejemplo (para el icono de 'anuncio'):

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

3) Use una tercera clase opcional icon-whitepara invertir el color de negro a blanco (para fondos oscuros)

Cambiar el tamaño del icono:

Como se trata de una imagen de fondo y no de un icono de fuente, use las propiedades heighty widthde CSS para modificar el tamaño de los iconos. El valor predeterminado se establece en 24 px en la material-icons-newclase.

Ejemplo:

Caso I: Para el contorneado Tema del account_circle icono:

1) Incluya la hoja de estilo:

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

2) Agregue la etiqueta del icono en su página:

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

Opcional (para fondos oscuros):

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

Caso II: para el tema nítido de la evaluación icono de :

1) Incluya la hoja de estilo:

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

2) Agregue la etiqueta del icono en su página:

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

(Para fondos oscuros):

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

No puedo enfatizar lo suficiente que NO ES LA FORMA CORRECTA de incluir los íconos en su entorno de producción. Pero si tiene que escanear a través de múltiples íconos en su página en desarrollo, hace que la inclusión de íconos sea bastante fácil y ahorra mucho tiempo.

Descargar el ícono como SVG o PNG es una mejor opción cuando se trata de la optimización de la velocidad del sitio, pero los íconos de fuente ahorran tiempo cuando se trata de la fase de creación de prototipos y verificar si un ícono en particular va con su diseño, etc.

Actualizaré esta publicación si Google presenta una solución para este problema que no implica la descarga de un icono para su uso.

Ashil John
fuente
¡Hola! esto es bastante útil, pero aún no puedo incluir mi ícono, quiero incluir screen_share, intenté con la clase .outline-screen_share pero imprime cualquier cosa, compruebo la clase en el inspector y existe, puedo perder cualquier paso?
Cucuru
1
@cucuru Gracias, creo que te perdiste el Paso 2 . Agregar la clase .material-icons-newy sus propiedades a su propia hoja de estilo primero y luego llamar al icono por <i class="material-icons-new outline-screen_share"></i>.
Ashil John
1
Ahora parece haber nuevas fuentes CSS para los nuevos temas de Material Icon: codepen.io/Chan4077/pen/bZNyQG
Edric
¡Excelente! Funciona de maravilla.
Soorya
Para material angular, debe usar en fontSetlugar de class. Vea la respuesta de Ron Netzer a continuación del 14/8/19.
Russ
31

A partir del 27 de febrero de 2019, hay fuentes CSS para los nuevos temas de Material Icon.

Sin embargo, debe crear clases CSS para usar las fuentes.

Las familias de fuentes son las siguientes:

  • Material Icons Outlined - Iconos contorneados
  • Material Icons Two Tone - iconos de dos tonos
  • Material Icons Round - Iconos redondeados
  • Material Icons Sharp - Iconos afilados

Vea el ejemplo de código a continuación para ver un ejemplo:

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

O verlo en Codepen

EDITAR: a partir del 10 de marzo de 2019, parece que ahora hay clases para los nuevos iconos de fuente:

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

EDITAR # 2: Aquí hay una solución para teñir íconos de dos tonos usando filtros de imagen CSS (código adaptado de este comentario ):

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

O verlo en Codepen

Edric
fuente
3
Parece que el coloratributo CSS actualmente no afecta el color de los nuevos temas de icono de material.
Edric
1
El icono delineado no funciona, es decir, ¿alguna idea?
Jismon Thomas
1
no aparece en absoluto, incluso si ejecuta esta página en ie, puede ver que es solo un espacio en blanco, ¡terminé usando la línea de base en ie!
Jismon Thomas
Parece que la colorpropiedad es compatible con todos los iconos, excepto los iconos de dos tonos. (Probado hasta hoy)
Edric
16

Para el material angular, debe usar la entrada fontSet para cambiar la familia de fuentes:

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

Si ya tiene íconos de material trabajando en su proyecto web, solo necesita actualizar su referencia en el archivo html y la clase utilizada para íconos:

referencia html:

antes de

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

Despué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" />

clase de iconos de material:

Después de eso, simplemente verifique qué className está utilizando:

Antes de:

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

Después:

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

eso funciona para mí ... Pura vida!

rocaes90
fuente
10

Lo que funcionó para mí es usar _outline no _outline d después del nombre del icono.

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

vs 

<mat-icon>info_outline</mat-icon>
fxrxz
fuente
Ah-hah, entonces funciona así en Angular; Eso está muy bien.
Ashil John
55
Hay algunos iconos que son esquemas y tienen el sufijo _outline. Solo funciona para aquellos
Sangmin Lee
@SangminLee sí, esta es la lista de iconos donde debería funcionar. material.io/tools/icons/?style=outline
fxrxz
@ Aj334 sí, está ordenado, ¿también puede aceptar esta respuesta si responde a su pregunta?
fxrxz
1
Acabo de usar esto con la fuente web Material simple en un proyecto React.js. Por lo tanto, no tiene nada que ver con Angular. Creo que esta es la solución.
Juuro
9

A partir del 05/12/2020, debe

1. incluir 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. Úselo así:

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

Nota: Por ejemplo, para usar el estilo delineado, debe especificar clases de iconos de material Y de iconos de material .

Vano Maisuradze
fuente
Para angular, uso <mat-icon class="material-icons-two-tone">alarm</mat-icon>. Reemplazar la clase, ya sea con material-icons, material-icons-outlined, material-icons-two-tone, material-icons-sharpo material-icons-round. Y reemplace la alarma con cualquier nombre de icono de: material.io/resources/icons/?icon=assessment&style=baseline
Quad Coders
Al usar medios mat-icon, está agregando un módulo adicional, lo que aumenta el tamaño de la aplicación (Bueno, aumenta un poco, pero a veces es importante unos pocos kb)
Vano Maisuradze
@VanoMaisuradze, ¿puedes vincularlo al documento?
Mehulkumar
AFAIK, no hay documento para esto.
Vano Maisuradze
5

Los nuevos temas probablemente no forman parte de la fuente de los iconos de material (¿todavía? Enlace .

Martín
fuente
Ese proyecto no ha publicado un lanzamiento en 2 años, no estoy conteniendo la respiración.
Coderer
3

La edición reciente del Aj334 funciona perfectamente.

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

Elemento de icono

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

Ninguna de las respuestas hasta ahora explica cómo descargar las diversas variantes de esa fuente para que pueda servirlas desde su propio sitio web (servidor WWW).

Si bien esto puede parecer un problema menor desde la perspectiva técnica, es un gran problema desde la perspectiva legal, al menos si tiene la intención de presentar sus páginas a cualquier ciudadano de la UE (o incluso, si lo hace por accidente). Esto es incluso cierto para las empresas que residen en los EE. UU. (O cualquier país fuera de la UE).

Si a alguien le interesa por qué es así, actualizaré esta respuesta y daré más detalles aquí, pero por el momento, no quiero desperdiciar demasiado espacio fuera de tema.

Habiendo dicho ésto:

He descargado todas las versiones (normal, resumida, redondeada, nítida, de dos tonos) de esa fuente siguiendo dos pasos muy fáciles (fue la respuesta de @ Aj334 a su propia pregunta lo que me puso en el camino correcto) (por ejemplo: "variante):

  1. Obtenga el CSS de Google CDN permitiendo que su navegador obtenga directamente la URL de CSS , es decir, copie la siguiente URL en la barra de ubicación de su navegador:

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

    Esto devolverá una página que se ve así (al menos en Firefox 70.0.1 al momento de escribir esto):

    /* 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. Busque la línea que comienza src:en el código anterior y permita que su navegador busque la URL contenida en esa línea , es decir, copie la siguiente URL en la barra de ubicación de su navegador:

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

    Ahora el navegador descargará ese .woff2archivo y ofrecerá guardarlo localmente (al menos, Firefox lo hizo).

Dos observaciones finales:

Por supuesto, puede descargar las otras variantes de esa fuente usando el mismo método. En el primer paso, simplemente reemplace la secuencia de caracteres Outlineden la URL por las secuencias de caracteres Round(sí, realmente, aunque aquí se llama "Redondeado" en el menú de navegación izquierdo), Sharpo Two+Tone, respectivamente. La página de resultados se verá casi igual cada vez, pero la URL en la src:línea, por supuesto, es diferente para cada variante.

Finalmente, en el paso 1, incluso puede usar esa URL:

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

Esto devolverá el CSS para todas las variantes en una página, que luego contiene cinco src:líneas, cada una con otra URL que designa la ubicación de la fuente respectiva.

Binarus
fuente
2

¡El enlace webfonts funciona ahora, en todos los navegadores!

Simplemente agregue sus temas al enlace de fuente separados por una tubería ( |), como este

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

Luego, haga referencia a la clase, así:

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

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

Este patrón también funcionará con material angular:

<mat-icon>account_balance</mat-icon>
<mat-icon class="material-icons-outlined">account_balance</mat-icon>
intergaláctico
fuente
Mantendré este enfoque simple hasta que salga la solución del atributo. Good one @intergalactic
Sparker73
¿Qué sucede si obtengo los íconos dependenciesen package.json de la aplicación en lugar de <link>? No puedo incluir iconos contorneados en la URL ...
Jago
1

Poner en el enlace principal a los estilos de google

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

y en el cuerpo algo como esto 

<i class="material-icons-outlined">bookmarks</i>
Володимир Лук'янюк
fuente
0

Terminé usando la aplicación IcoMoon para crear una fuente personalizada usando solo los nuevos iconos temáticos que necesitaba para una compilación de aplicación web reciente. No es perfecto, pero puede imitar la funcionalidad existente de Google Font bastante bien con un poco de configuración. Aquí hay una reseña:

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

Si alguien se siente atrevido, podría convertir todo el tema usando IcoMoon. Demonios, IcoMoon probablemente tiene un proceso interno que lo facilitaría, ya que ya tienen los iconos de materiales originales establecidos en su biblioteca.

De todos modos, esta no es una solución perfecta, pero funcionó para mí.

Lee Martin
fuente
0

No estaba satisfecho hasta que sé que Google aún no ha lanzado sus nuevos diseños como conjunto de iconos de fuente o svg. Por lo tanto, armé un pequeño paquete npm para resolver el problema.

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

Simplemente importe los íconos que desea usar y agréguelos a su registro. Esto también admite el movimiento de los árboles, ya que solo se agregan a su proyecto los iconos que realmente desea y / o necesita.

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

usar dos iconos de tono, por ejemplo

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

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

En su plantilla html ahora puede usar el nuevo ícono

<mat-icon svgIcon="edit"></mat-icon>
MarcusCalidus
fuente
0

Configuración del color de dos tonos:

Como se describió anteriormente, puede usar la colortecla CSS excepto para materiales de dos tonos Tema de que parece tener fallas ;-)

Se describe una solución alternativa en uno de varios problemas de github de material angular mediante el uso de un filtro css personalizado. Este filtro personalizado se puede generar aquí .

P.ej:

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%);
}

Archivos adjuntos:

zerocewl
fuente