Los iconos básicos
Para utilizar los iconos de Google, añada la siguiente línea dentro del <head> sección de su página HTML:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Nota: No se requiere ninguna descarga o instalación!
Añadir el material-icons de clase a un elemento en línea e introduzca el nombre del icono:
Ejemplo
El siguiente código:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons"
style="font-size:48px;">cloud</i>
<i class="material-icons"
style="font-size:60px;color:red;">cloud</i>
</body>
</html>
Resultados en:
cloud
cloud
cloud Inténtalo tú mismo " iconos de Google están diseñados para ser utilizados con los elementos en línea. El <i> y <span> elementos son ampliamente utilizados para los iconos.
Nota: Los iconos de materiales se 24px por defecto.
También tenga en cuenta que si cambia el color del contenedor del icono, el color del icono cambia también. Mismas cosas va para sombra, y cualquier otra cosa que consigue heredó el uso de CSS. La excepción es la propiedad font-size CSS, lo cual es siempre 24px, a menos que se especifique otra cosa.
Los iconos de tamaño considerable
A pesar de los iconos de materiales que pueden ser escalados a cualquier tamaño, el tipo de letra, tamaño recomendado es o bien 18, 24, 36 o 48px:
Ejemplo
El siguiente código:
<style>
/* Rules for icon sizes: */
.material-icons.md-18 { font-size:
18px; }
.material-icons.md-24 { font-size:
24px; } /* Default */
.material-icons.md-36 { font-size:
36px; }
.material-icons.md-48 { font-size:
48px; }
</style>
<i class="material-icons md-18">cloud</i>
<i class="material-icons
md-24">cloud</i>
<i class="material-icons md-36">cloud</i>
<i class="material-icons
md-48">cloud</i>Resultados en:
cloud
cloud
cloud
cloud
Inténtalo tú mismo "