Hace pocas semanas, Google anunció que ampliaba el catálogo de Google Fonts. Y no precisamente con nuevas tipografías, sino añadiendo su biblioteca de iconos de Material Design. Esta colección ya estaba disponible, pero con este movimiento Google parece que quiere centralizar en una misma página algunos de sus recursos gráficos. Por eso, queríamos hacer una pequeña guía de como poder utilizar estos iconos para aquellos que nunca los han utilizado.
Como curiosidad, junto a este anuncio, Google aprovechó para mostrar la nueva imagen de Google Fonts, un rediseño acorde al que han ido haciendo al resto de sus servicios. Aunque estos rediseños parecen que no esta siendo del agrado de muchos. ¿Qué opináis vosotros?
Bueno, antes de entrar de lleno en el tema de hoy, entremos en el apartado de iconos de Google Fonts. Si nos fijamos, veremos que disponemos de cinco estilos diferentes para cada uno de los iconos: outlined (línea exterior), filled (relleno), rounded (redondeado), sharp (marcado) y two tones (dos tonos). Aunque en algunas ocasiones veamos que el icono es idéntico entre un estilo y otro, siempre existe una pequeña diferencia. Esto seguro que lo agradecen aquellos que les gusta controlar hasta el más mínimo detalle, ya que pueden que encuentren en un estilo algún detalle que no encaje con lo que buscan.
Una vez aclarado este primer punto, pasemos a ver como podemos trabajar con los iconos de Google Fonts.
Usando los iconos en nuestros proyectos
Tal y como ocurre con las tipografías de Google Fonts, tenemos dos opciones: descargarlas directamente en nuestro dispositivo, o usarlas vía enlace en nuestra web. A pesar de ser un proceso parecido, en el caso de los iconos de Google Fonts hay algunas diferencias. Veamos como se haría en cada caso.
Descarga descarga directa de iconos
Es lo más sencillo. Solo hay que ir a la web de Google Fonts Icons, elegir el iconos que queramos con su estilo correspondiente y se nos abrirá un panel a la derecha parecido a este.
Como podemos ver, podemos elegir la densidad del icono, su tamaño medido en dp (pixeles de densidad independiente, muy importante si nuestro proyecto se va a ver en smartphones), y su color. Y a la hora de guardar, podemos elegir entre formato png o svg.
Además, si somos de los que nos gusta tener todo en nuestro ordenador y no depender de la web para descargar los iconos. O simplemente no queremos descargarlos uno a uno, si vamos al GitHub de Google, desde aquí podemos descargar un archivo zip con todos los iconos (a día de hoy, la última versión es la 4.0.0) , en cada uno de sus estilos y tamaños. Porque acumular iconos en nuestra biblioteca personal nunca es suficiente.
Añadiendo iconos en una web
Por supuesto, una vez tengamos el archivo de imagen, ya sea en formato png o svg, en nuestro ordenador, podemos subirlo al servidor de nuestra web para usarlo allí. Pero, como también pasa con las tipografías de Google Fonts, podemos insertarlas de forma más sencilla simplemente usando unas pocas líneas de código. Además de disponer de forma directa de toda la biblioteca de iconos, sin tener que subir uno a uno los iconos. Esto lo podemos hacer de dos maneras.
1. Usando Google Fonts
Lo que debemos hacer es añadir este HTML a nuestro head:
<!-- https://material.io/resources/icons/?style=baseline -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons"
rel="stylesheet">
<!-- https://material.io/resources/icons/?style=outline -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined"
rel="stylesheet">
<!-- https://material.io/resources/icons/?style=round -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Round"
rel="stylesheet">
<!-- https://material.io/resources/icons/?style=sharp -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Sharp"
rel="stylesheet">
<!-- https://material.io/resources/icons/?style=twotone -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Two+Tone"
rel="stylesheet">Seguro que muchos de los que hacéis uso de Google Fonts ya os sonará esto, y es que es prácticamente igual a como se añaden las tipografías. Antes de empezar a agregar HTML a lo loco, aclarar un tema. Cada uno de estos links corresponden a los diferentes estilos de iconos que ya hemos visto que nos ofrece Google Fonts. Es recomendable solo añadir la línea de HTML del estilo o estilos de icono que vayamos a usar, ya que si no estaremos haciendo cargar cosas innecesarias a nuestra web, con los problemas que eso conlleva. El siguiente paso es irnos a la biblioteca de iconos de Google Fonts, buscar el icono que queremos usar, seleccionarlo y ver el código HTML que tiene en el panel que se nos abre a la derecha. Por ejemplo, si queremos añadir el icono Home en su versión de dos tonos, su código será:
<span class="material-icons">home</span>La clase CSS del span nos dice que queremos usar los iconos de Google Fonts y su estilo de icono (en este caso, el estilo filled o con relleno), y la palabra dentro del span que icono es. Si queremos que sea la versión en two tones (de dos tones), la clase sería material-icons-two-tones. Muy sencillo, y sin necesidad de subir ningún archivo al servidor donde esté alojada la web.
Como ocurre con las tipografías, y gracias a las propiedades CSS, podemos cambiar el color del icono, su tamaño, etc. Si no estás muy familiarizado con este lenguaje, te recomendamos que veas nuestra guía de iniciación a CSS que hicimos en Silo Creativo.
2. Alojando en nuestro servidor
Aunque antes hemos dicho que veríamos método para no tener que subir los iconos, este punto tiene un poco de truco. Y es que lo que subiremos será un archivo de fuente OpenType, por lo que va a funcionar de forma muy parecida a como lo haría cualquier tipografía. Estos archivos los podemos descargar desde el GitHub de Google. Una vez subido, añadiremos el siguiente código CSS:
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://miweb.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://miweb.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://miweb.com/MaterialIcons-Regular.woff) format('woff'),
url(https://miweb.com/MaterialIcons-Regular.ttf) format('truetype');
}Este código nos serviría para los iconos filled o con relleno. Si vamos a usar otro estilo de icono, o varios, solo habría que añadir las líneas correspondiente. Y, por supuesto, cambiar la url para que coincida con donde hemos alojado los archivos. Es este caso, también podemos modificar lo que queramos mediante CSS: color, tamaño…
Conclusión
Como hemos podido ver, ahora Google nos facilita el poder usar su biblioteca de iconos Material Design de forma sencilla. Un recurso más a nuestra disposición para usar en nuestro proyectos, ya sean de diseño gráfico como web. Y en este último caso, con la garantía que nos ofrece Google sobre la alta compatibilidad que tiene con todo tipo de navegadores web. Por lo que podemos despreocuparnos de si vamos a tener problemas en cualquier tipo de navegador y/o dispositivo.
Y con esto terminamos por hoy, como siempre, esperamos que os haya servido de ayuda, y que podáis utilizar los iconos de Google Fonts en vuestro proyectos del día a día. Tenéis disponibles los comentarios para hacernos llegar cualquier duda, consulta o experiencia que hayáis tenido.
