Icone dei materiali

Google fornisce una serie di 750 icone progettate secondo le "linee guida per la progettazione dei materiali" e queste sono note come Material Designicone. Queste icone sono semplici e supportano tutti i browser Web moderni. Poiché queste icone sono basate su vettori, sono anch'esse scalabili. Per utilizzare queste icone, dobbiamo caricare il carattere (libreria)material-icons.

Caricamento del carattere (libreria)

Per caricare la libreria delle icone dei materiali, copia e incolla la riga seguente nella sezione <head> di una pagina web.

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

Utilizzo dell'icona

Le icone dei materiali di Google forniscono un lungo elenco di icone. Scegli uno di loro e aggiungi il nome della classe di icone a qualsiasi elemento HTML all'interno del tag <body>. Nell'esempio seguente, abbiamo utilizzato l'icona denominataaccessibility che appartiene alla categoria delle azioni.

<!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>

Produrrà il seguente output:

Definizione della dimensione

È possibile aumentare o diminuire la dimensione di un'icona definendone la dimensione nel CSS e utilizzandola insieme al nome della classe come mostrato di seguito. Nell'esempio seguente, abbiamo dichiarato la dimensione come 6 em.

<!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>

Produrrà il seguente output:

Definizione del colore

Puoi utilizzare il CSS per definire il colore di un'icona. L'esempio seguente mostra come modificare il colore di un'icona chiamataaccessibility.

<!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>

Produrrà il seguente output:

Elenco delle categorie

Il carattere Material Icons di Google fornisce 519 icone nelle seguenti categorie:

  • Icone di azione
  • Icone di avviso
  • Icone AV
  • Icone di comunicazione
  • Icone dei contenuti
  • Icone del dispositivo
  • Icone dell'editor
  • Icone dei file
  • Icone hardware
  • Icone immagine
  • Icone delle mappe
  • Icone di navigazione
  • Icone di notifica
  • Icone sociali
  • Attiva / disattiva icone

Per utilizzare una qualsiasi di queste icone, è necessario sostituire il nome della classe nei programmi forniti in questo capitolo con il nome della classe dell'icona desiderata. Nei prossimi capitoli di questa unità (Icone dei materiali), abbiamo spiegato l'uso per categoria e le rispettive uscite delle varie icone dei materiali.