Integrar material icons localmente

Como sabemos los Material icons son parte del Material Design de Google que hace uso de elementos sencillos y formas geométricas para representar visualmente las ideas básicas.

Si alguna vez se quiere implementar estos iconos en algun proyecto web existen dos formas de hacerlo:

1. A través de internet
2. Localmente

La primera es la más fácil de hacer, pero cabe mencionar que solo funcionará si el ordenador que ejecuta la aplicación web tiene conexión a internet, para hacerlo de esta manera solo es necesario colocar la referencia en el header de un documento HTML, de la siguiente manera:

La segunda manera es un poco más compleja de realizar, y es la que vamos a ver como realizar a mayor detalle. 

Existirán ocasiones en las que nuestro proyecto web no tenga conexion a internet, por ejemplo: solo debe funcionar en una intranet. En estos casos es cuando usamos la segunda alternativa, y para lograr esto hacemos lo siguiente:

1. Descargamos el tipo de fuente de material icons del siguiente link https://github.com/google/material-design-icons/tree/master/iconfont
2. Una vez descargado extraemos la carpeta iconfont y la colocamos en un directorio de nuestro proyecto web
3. Veremos que existen algunos archivos con extension woff, woff2, ttf y un archivo css
4. Este archivo css (material-icons.css) es el que tenemos que cargar en nuestro proyecto web a traves del header de un documento HTML, de la siguiente manera

Una vez echo esto ya podemos probar el funcionamiento de los iconos.