Cómo usar iconos de Google en HTML y CSS?

Los íconos son representaciones visuales de diferentes acciones, programas o archivos y pueden desempeñar un papel muy importante en el diseño del sitio web. Pueden mejorar el aspecto general del sitio web y demostrar ser una buena fuente de atraer más audiencia a su sitio web. Los iconos proporcionan una fácil navegación, por lo tanto, aumentando la experiencia del usuario. Hay una amplia gama de iconos que puede agregar a su sitio web, sin embargo, este artículo está diseñado para guiarlo sobre cómo usar iconos de Google en HTML y CSS.

Los temas explorados en este artículo son:

1. ¿Qué son los iconos de Google??
2. Cómo agregar un icono de Google?
3. Cambiar el tamaño de un icono de Google
4. Modificando el color de un icono de Google

Vamos a empezar.

¿Qué son los iconos de Google??

Google proporciona una gran variedad de íconos (un total de 750) que se consideran íconos de diseño de materiales. Estos íconos son simples pero modernos y representan acciones u objetos comúnmente utilizados. Por ejemplo, un icono de basura representa la acción de "eliminar". Estos íconos están respaldados por todos los navegadores actuales. La captura de pantalla adjunta a continuación muestra algunos de los íconos de diseño de material.

Ahora que sabemos qué son los iconos de Google, aprendamos cómo agregarlos a las páginas web.

Cómo agregar un icono de Google?

Con el fin de agregar íconos de diseño de material de Google a sus sitios web, siga los pasos a continuación.

Paso 1
El primer paso es agregar el enlace de la biblioteca de fuentes de material de material en la sección de su archivo HTML. Así es como lo haces.

Paso 2
Una vez que haya agregado el enlace de la biblioteca de materiales-íconos, el siguiente paso es agregar la clase "material-icons" en el o etiqueta de la sección y también agregue el nombre del icono.

Wifi

Ejemplo 1
En este ejemplo, se agrega un icono de configuración en la página web.

ajustes

Producción

Icono de configuración agregado correctamente.

Ejemplo 2
En el ejemplo a continuación, se agrega un icono de cierre de sesión en la página web.

cerrar sesión

Producción

Icono de cierre de sesión insertado correctamente.

También puede alterar el tamaño de estos iconos de diseño de material utilizando CSS. Vamos a explorarlo en detalle.

Cambiar el tamaño de un icono de Google

Puede alterar el tamaño de los iconos de diseño de material de Google de acuerdo con su deseo usando CSS. Siga los pasos mencionados en esta sección para cambiar el tamaño de su icono de diseño de material de Google.

Paso 1
En la etiqueta, utilizando la clase Material-Icons, define el tamaño del icono, por ejemplo.

Paso 2
Usa la misma clase en el Etiqueta junto con el nombre del icono.

ajustes

Producción

Tamaño del icono de configuración cambiado correctamente.

Además del tamaño, también puede modificar el color de los iconos de Google. Veamos cómo se hace.

Modificando el color un icono de Google

Con el propósito de cambiar el color de los íconos de diseño de material de Google, siga los mismos pasos que se mencionan en la sección anterior con una ligera diferencia que, junto con el tamaño de la fuente, puede tener que definir el color utilizando la propiedad de color de CSS.

Ejemplo
Supongamos que desea cambiar el color del icono de configuración al azul.

ajustes

Producción

El color del icono de configuración cambió con éxito.

Conclusión

Para incrustar los iconos de Google en sus páginas web HTML, debe agregar el enlace de la biblioteca de fuentes de materiales-íconos en la sección de su archivo HTML y luego agregar los íconos de material de clase en el o etiqueta de la sección junto con el nombre del icono. También puede alterar el tamaño y el color de los iconos a través de CSS definiéndolos en la etiqueta utilizando la clase Material-Icons. Este artículo analiza cómo usar iconos de Google en HTML y CSS en profundidad con la ayuda de ejemplos apropiados.