Saltar al contenido

¿Cómo utilizar los nuevos temas de íconos de diseño de materiales: contorneado, redondeado, de dos tonos y nítido?

Solución:

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

Como lo señaló Edric, es solo cuestión de agregar el enlace de fuentes web de Google en el encabezado de su documento ahora, 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 son un poco defectuosos en este momento.

Actualización (14/11/2018): lista de 16 iconos de contorno que funcionan con el sufijo “_outline”.

Aquí está la lista más reciente de 16 iconos de contorno que funcionan con la fuente web de iconos de material regular, usando el _contorno sufijo (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 Gráfico circular necesita ser “Gráfico circular_resumido” y no contorno.

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), poco más de 2 meses desde que se introdujeron los nuevos temas de iconos, no hay manera para incluir estos iconos mediante 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 íconos en mi entorno de desarrollo antes de descargar los iconos apropiados como SVG o PNG. Y pensé en compartirlo con todos ustedes.

IMPORTANTE: No lo utilice 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:

Esquema:

<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 iconos 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 ícono 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 utilizar. Por ejemplo: para el tema ‘Esquema’, use la hoja de estilo para ‘esquema.css’

PASO 2:

Agregue las siguientes clases a su propio 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 lo siguiente clases al <i> etiqueta:

  1. material-icons-new clase

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

Prefijos:

Resumido: 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-white para 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 un icono de fuente, utilice el height y width propiedades de CSS para modificar el tamaño de los iconos. El valor predeterminado se establece en 24 px en el material-icons-new clase.

Ejemplo:

Caso I: Para el Esbozado 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">
  1. 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 Afilado Tema del evaluación icono:

  1. Incluya la hoja de estilo:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">
  1. 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 esta NO ES LA FORMA CORRECTA de incluir los iconos en su entorno de producción. Pero si tiene que escanear varios íconos en su página en desarrollo, hace que la inclusión del ícono sea bastante fácil y ahorra mucho tiempo.

Descargar el ícono como SVG o PNG es sin duda una mejor opción cuando se trata de la optimización de la velocidad del sitio, pero los íconos de fuentes 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 siempre que Google encuentre una solución para este problema que no implique la descarga de un ícono para su uso.

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

A partir del 27 de febrero de 2019, hay fuentes CSS para los nuevos temas de Íconos de materiales.

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>

O verlo en Codepen

EDITAR: A partir del 10 de marzo de 2019, parece que ahora hay clases para los nuevos íconos de fuentes:

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>

EDITAR # 2: Aquí hay una solución para teñir los íconos de dos tonos mediante el uso de 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>

O verlo en Codepen

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)

Tags : / / /

Utiliza Nuestro Buscador

Preguntas Relacionadas:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *