Icone di base
Per utilizzare le icone di Google, aggiungere la seguente riga all'interno del <head> sezione della pagina HTML:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Nota: Non è richiesta alcuna scaricamento o installazione!
Aggiungere il material-icons di classe ad un elemento in linea e inserire il nome dell'icona:
Esempio
Il seguente codice:
<!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>
Risultati in:
cloud
cloud
cloud Prova tu stesso " icone Google sono progettati per essere utilizzati con elementi in linea. Il <i> e <span> elementi sono ampiamente utilizzati per le icone.
Nota: le icone del materiale sono 24px di default.
Si noti inoltre che se si cambia il colore del contenitore del icona, il colore dell'icona cambia troppo. Stesso discorso vale per le cose ombra, e qualsiasi altra cosa che viene ereditato usando i CSS. L'eccezione è la proprietà font-size CSS, che è sempre 24px, a meno che non sia specificato qualcos'altro.
Icone di considerevoli dimensioni
Anche se le icone del materiale può essere scalata a qualsiasi dimensione, il font-size consigliata è o 18, 24, 36 o 48px:
Esempio
Il seguente codice:
<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>Risultati in:
cloud
cloud
cloud
cloud
Prova tu stesso "