Tipos de iconos

En Google Fonts Icons, existen dos tipos principales de iconos: estáticos y variables.

Iconos estáticos:

Los iconos estáticos son aquellos con características fijas, como grosor del trazo y relleno, lo que los hace simples de implementar y menos personalizables. Estos iconos son ideales cuando no se necesita una adaptación precisa de sus atributos

Iconos variables:

Los iconos variables de Google Fonts ofrecen la capacidad de ajustar varias características que no son fácilmente modificables en los iconos estáticos. Los iconos variables ofrecen una flexibilidad mayor para adaptarse a requerimientos particulares.

Grosor del trazo (Weight): Permite ajustar el grosor de las líneas del icono, desde un trazo fino hasta uno más grueso.

Relleno (Fill): Permite cambiar el estilo de relleno del icono, desde sin relleno hasta un relleno completo.

Grado (Grade): Proporciona un ajuste más detallado del grosor del trazo, permitiendo gradaciones sutiles en la apariencia del icono.

Tamaño óptico (Optical Size): Permite mantener el grosor del trazo consistente a diferentes tamaños, ajustándolo automáticamente según el tamaño del icono.

Formas de insertar iconos de Google Fonts

Insertar iconos estáticos

Agregar la hoja de estilos en el head

Para utilizar los iconos estáticos de Google Fonts, primero necesitas agregar la hoja de estilos en tu página HTML.

Insertar iconos en HTML

Una vez que la hoja de estilos está vinculada, puedes insertar un icono en tu HTML utilizando elementos i o span con la clase material-icons. Además, debes reemplaza el texto dentro de los elementos i o span con el nombre del icono que quieras mostrar (nombre que aparece bajo del icono de la página de Google Fonts Icons).

Personalización de iconos de Google Fonts Icons

Si buscamos un control más preciso sobre ciertos aspectos como el peso, el tamaño o el relleno de los iconos, es recomendable considerar el uso de fuentes variables.

Insertar iconos variables

Puedes personalizar ciertos aspectos de los iconos variables desde el sidebar izquierdo «Apartado Custom». Esta herramienta de personalización de Google Fonts Icons, cuenta con las secciones «Fill», «Weight», «Grade», «Optical Size», «Filter», «Style», y «Category».

Fill (Relleno): Controla el estilo de relleno del icono, permitiendo transiciones entre estados con diferentes niveles de relleno (desde ningún relleno hasta relleno completo).

Weight (Peso): Define el grosor del trazo del símbolo, con opciones que van desde 100 (fino) hasta 700 (negrita), afectando tanto la apariencia como el tamaño del ícono.

Grade (Calificación): Ajusta el grosor del símbolo de manera más detallada que el peso, con opciones como -25 (énfasis bajo) y 200 (énfasis alto), que pueden influir en el tamaño y el contraste visual.

Optical size (Tamaño óptico): Permite mantener un grosor de trazo consistente al escalar el tamaño del icono entre 20px y 48px, asegurando que el ícono se vea bien en diferentes dimensiones.

Filter (Filtro), Style (Estilo), Category (Categoría): Estas secciones ofrecen filtros adicionales, opciones de estilo y categorización para facilitar la búsqueda y selección de iconos específicos según ciertos criterios.

Integración con frameworks

Los iconos de Google son compatibles con varios frameworks y librerías. Este es utilizado en BootStrap.