Material - Inhaltssymbole

In diesem Kapitel wird die Verwendung der (materiellen) Inhaltssymbole von Google erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

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

Die folgende Tabelle enthält die Verwendung und die Ergebnisse der Inhaltssymbole von Google (Material). Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung	Ergebnis
<i class = "material-icons custom"> hinzufügen </ i>	hinzufügen
<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"> Archiv </ i>	Archiv
<i class = "material-icons custom"> Rücktaste </ i>	Rücktaste
<i class = "material-icons custom"> Block </ i>	Block
<i class = "material-icons custom"> löschen </ i>	klar
<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"> erstellen </ i>	erstellen
<i class = "material-icons custom"> Entwürfe </ i>	Entwürfe
<i class = "material-icons custom"> filter_list </ i>	filter_list
<i class = "material-icons custom"> flag </ i>	Flagge
<i class = "material-icons custom"> font_download </ i>	font_download
<i class = "material-icons custom"> weiterleiten </ i>	nach vorne
<i class = "material-icons custom"> Geste </ i>	Geste
<i class = "material-icons custom"> Posteingang </ i>	Posteingang
<i class = "material-icons custom"> Link </ i>	Verknüpfung
<i class = "material-icons custom"> mail </ i>	Mail
<i class = "material-icons custom"> markunread </ i>	als ungelesen markieren
<i class = "material-icons custom"> wiederholen </ i>	wiederholen
<i class = "material-icons custom"> entfernen </ i>	entfernen
<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"> antworte </ i>	Antworten
<i class = "material-icons custom"> reply_all </ i>	reply_all
<i class = "material-icons custom"> Bericht </ i>	Bericht
<i class = "material-icons custom"> speichern </ i>	sparen
<i class = "material-icons custom"> select_all </ i>	Wählen Sie Alle
<i class = "material-icons custom"> senden </ i>	senden
<i class = "material-icons custom"> sort </ i>	Sortieren
<i class = "material-icons custom"> text_format </ i>	Textformat
<i class = "material-icons custom"> stay_current_portrait </ i>	stay_current_portrait
<i class = "material-icons custom"> rückgängig machen </ i>	rückgängig machen