Materiale - Icone del contenuto

Questo capitolo spiega l'utilizzo delle icone dei contenuti (materiali) di Google. Assumilocustom è il nome della classe CSS in cui abbiamo definito la dimensione e il colore, come mostrato nell'esempio riportato di seguito.

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

La tabella seguente contiene l'utilizzo e i risultati delle icone dei contenuti (materiali) di Google. Sostituisci il tag <body> del programma precedente con il codice fornito nella tabella per ottenere i rispettivi output -

Utilizzo Risultato
<i class = "material-icons custom"> aggiungi </i> Inserisci
<i class = "material-icons custom"> add_box </i> add_box
<i class = "material-icons custom"> add_circle </i> add_circle
<i class = "material-icons custom"> add_circle_outline </i> add_circle_outline
<i class = "material-icons custom"> archivio </i> archivio
<i class = "material-icons custom"> backspace </i> backspace
<i class = "material-icons custom"> blocco </i> bloccare
<i class = "material-icons custom"> clear </i> chiaro
<i class = "material-icons custom"> content_copy </i> content_copy
<i class = "material-icons custom"> content_cut </i> content_cut
<i class = "material-icons custom"> content_paste </i> content_paste
<i class = "material-icons custom"> crea </i> creare
<i class = "material-icons custom"> bozze </i> bozze
<i class = "material-icons custom"> filter_list </i> filter_list
<i class = "material-icons custom"> flag </i> bandiera
<i class = "material-icons custom"> font_download </i> font_download
<i class = "material-icons custom"> avanti </i> inoltrare
<i class = "material-icons custom"> gesto </i> gesto
<i class = "material-icons custom"> posta in arrivo </i> posta in arrivo
<i class = "material-icons custom"> link </i> collegamento
<i class = "material-icons custom"> posta </i> posta
<i class = "material-icons custom"> markunread </i> Segna come da leggere
<i class = "material-icons custom"> ripeti </i> rifare
<i class = "material-icons custom"> rimuovi </i> rimuovere
<i class = "material-icons custom"> remove_circle </i> remove_circle
<i class = "material-icons custom"> remove_circle_outline </i> remove_circle_outline
<i class = "material-icons custom"> rispondi </i> rispondere
<i class = "material-icons custom"> reply_all </i> rispondi a tutti
<i class = "material-icons custom"> report </i> rapporto
<i class = "material-icons custom"> salva </i> Salva
<i class = "material-icons custom"> select_all </i> seleziona tutto
<i class = "material-icons custom"> invia </i> Spedire
<i class = "material-icons custom"> ordinamento </i> ordinare
<i class = "material-icons custom"> text_format </i> text_format
<i class = "material-icons custom"> stay_current_portrait </i> stay_current_portrait
<i class = "material-icons custom"> annulla </i> disfare