Introducción

Los Material icons o Iconos de material design son, como su nombre lo dice, iconos que nos ayudan a adornar y mejorar nuestras aplicaciones web. No siempre vamos a tener internet, puede que portemos nuestra app para una pc que no tenga acceso a internet. O igual y queremos alojar nosotros mismos los iconos, por si algo malo llega a pasar.

El punto es que en algún momento necesitaremos descargar iconos de Material icons para ternerlos offline. Y hoy vengo a mostrar cómo descargarlos.

¿De qué iconos hablamos?

Por si no sabes de lo que hablo, me refiero a los que aparecen en este enlace.

Podemos incluirlos así:

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

Pero como lo dije, vamos a ver cómo incluirlos offline.

No sé si sea legal descargar los iconos. Yo supongo que no hay ningún problema, pero es responsabilidad del usuario.

Analizando iconos

De hecho, es como cargar una fuente o tipografía. Si visitamos el link, veremos que hay código CSS:

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  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;
}

Tenemos que concentrarnos justamente en donde dice url y carga un archivo con extensión woff2. Si navegamos a ese link (que al menos en mi caso es https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) se nos descargará la fuente. Y podremos guardarla.

Esa fuente es la que trae todos los iconos. Vamos a guardarla en una carpeta de nuestra aplicación web llamada fonts con el nombre de iconos.woff2. Si le cambias el nombre, recuerda cambiarlo también al incluirlo.

Incluyendo fuente descargada

Ahora sí vamos a hacerlo offline, en nuestra app debe haber una carpeta que albergue nuestros estilos css. Pues junto a ella (no dentro de ella, sino en el mismo directorio) crearemos una carpeta llamada fonts.

Si no me entiendes bien, la estructura podría ser así:

Podemos ver que css, fonts y js están juntas. Ahora, a nuestro estilo CSS (que está dentro de la carpeta css) vamos a añadirle el siguiente fragmento de código:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/iconos.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  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;
}

Como podemos ver, es el mismo código que tiene la página de las fuentes de Google, pero con la diferencia de que ahora estamos cargando las fuentes que están un directorio arriba y luego dentro de la carpeta fonts.

Es decir, estamos dentro de la carpeta css. Para cargar la fuente, necesitamos salir de la carpeta o ir un directorio arriba (eso lo hacemos con ../). Una vez que hayamos salido, entramos a fonts y luego cargamos iconos.woff2

Y con eso hemos incluido los iconos offline. Ya sólo falta incluir un link a nuestros estilos css.

Directorio de ejemplo

Si no me expliqué bien, mi directorio está así:

En la carpeta css tengo a estilos.css. Ahí dentro puse el fragmento de código de arriba. Y en fonts tengo los iconos con la extensión woff2. Luego, en mi archivo index.html hago esto:

<link type="text/css" rel="stylesheet" href="./assets/css/estilos.css"/>

Resumiendo

En pocas palabras:

• Descarga la fuente y guárdala con el nombre que desees
• En tus estilos, añade el segundo fragmento de código que puse en el post. Y en url apunta al directorio en donde hayas descargado la fuente
• Finalmente incluye tu archivo css que carga la fuente en donde quieras usarlo