Iconos de material

Google proporciona un conjunto de 750 íconos diseñados según las "pautas de diseño de materiales" y se conocen como Material Designiconos. Estos iconos son simples y son compatibles con todos los navegadores web modernos. Dado que estos iconos están basados en vectores, también son escalables. Para utilizar estos iconos, tenemos que cargar la fuente (biblioteca)material-icons.

Cargando la fuente (biblioteca)

Para cargar la biblioteca de iconos de material, copie y pegue la siguiente línea en la sección <head> de una página web.

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

Usando el icono

Iconos de materiales de Google proporciona una larga lista de iconos. Elija cualquiera de ellos y agregue el nombre de la clase de icono a cualquier elemento HTML dentro de la etiqueta <body>. En el siguiente ejemplo, hemos utilizado el icono llamadoaccessibility que pertenece a la categoría de acción.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
   </head>
	
   <body>
      <i class = "material-icons">accessibility</i>
   </body>
	
</html>

Producirá la siguiente salida:

Definiendo el tamaño

Puede aumentar o disminuir el tamaño de un icono definiendo su tamaño en el CSS y usándolo junto con el nombre de la clase como se muestra a continuación. En el siguiente ejemplo, hemos declarado el tamaño como 6 cm.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.mysize {font-size: 6em;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons mysize">accessibility</i>
   </body>
	
</html>

Producirá la siguiente salida:

Definiendo el color

Puede utilizar CSS para definir el color de un icono. El siguiente ejemplo muestra cómo puede cambiar el color de un icono llamadoaccessibility.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 6em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Producirá la siguiente salida:

Lista de categorías

La fuente Material Icons de Google proporciona 519 iconos en las siguientes categorías:

Iconos de acción
Iconos de alerta
Iconos AV
Iconos de comunicación
Iconos de contenido
Iconos de dispositivo
Iconos del editor
Iconos de archivo
Iconos de hardware
Iconos de imagen
Iconos de mapas
Iconos de navegación
Iconos de notificación
Iconos sociales
Alternar iconos

Para usar cualquiera de estos íconos, debe reemplazar el nombre de la clase en los programas dados en este capítulo con el nombre de la clase del ícono deseado. En los próximos capítulos de esta unidad (Iconos de material), explicamos por categorías el uso y los resultados respectivos de varios Iconos de material.

↰ Previous page Next page ↱