¿Cómo utilizar los nuevos temas de iconos de Material Design: delineado, redondeado, de dos tonos y nítido?

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

Como señaló Edric, ahora es solo cuestión de agregar el enlace de fuentes web de Google en el encabezado 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 agregar 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 del tema de dos tonos tienen algunos fallos en este momento.

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

Aquí está la lista más reciente de 16 íconos de esquema que funcionan con la fuente web Material-icons normal, usando 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 debe ser " pie_chart_outlined " y no contorno .

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

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

+Martin ha señalado que se ha planteado un problema en Github con respecto al 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 íconos en mi entorno de desarrollo antes de descargar los íconos 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 utiliza estas hojas de estilo para mostrar los íconos en su página de demostración:

Describir:

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

Afilado:

<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 respectivos temas incluidos como imágenes de fondo (datos de imagen Base64). Y así es como podemos usar esto para probar la compatibilidad de un ícono particular en nuestro diseño antes de descargarlo para usarlo en el entorno de producción.

PASO 1 :

Incluye la hoja de estilo del tema que deseas utilizar. Por ejemplo: para el tema 'Delineado', 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 :

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

1. material-icons-newclase

2. Nombre del icono como se muestra en la página de demostración de iconos de materiales, con el prefijo del nombre del tema seguido de un guión.

Prefijos:

Delineado:outline-

Redondeado:round-

Dos tonos:twotone-

Afilado:sharp-

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

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

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

Cambiar el tamaño del icono:

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

Ejemplo:

Caso I: Para el tema resumido del ícono account_circle :

1. Incluya la hoja de estilo:

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

2. Añade la etiqueta de icono en tu 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 Sharp del ícono de evaluación :

1. Incluya la hoja de estilo:

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

2. Añade la etiqueta de icono en tu 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 esta NO ES LA MANERA CORRECTA de incluir íconos en su entorno de producción. Pero si tiene que escanear varios íconos en su página en desarrollo, la inclusión de íconos es bastante fácil y ahorra mucho tiempo.

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

Actualizaré esta publicación cuando Google encuentre una solución para este problema que no implique descargar un ícono para su uso.

Jul 19 '2018 06:07 Ashil John