Material - Gerätesymbole

In diesem Kapitel erfahren Sie, wie Sie die (materiellen) Gerätesymbole von Google verwenden. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe wie unten gezeigt definiert haben.

<!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 (Material-) Gerätesymbole von Google.

Verwendung	Ergebnis
<i class = "material-icons custom"> access_alarm </ i>	access_alarm
<i class = "material-icons custom"> access_alarms </ i>	access_alarms
<i class = "material-icons custom"> access_time </ i>	Zugriffszeit
<i class = "material-icons custom"> add_alarm </ i>	add_alarm
<i class = "material-icons custom"> airplanemode_active </ i>	airplanemode_active
<i class = "material-icons custom"> airplanemode_inactive </ i>	airplanemode_inactive
<i class = "material-icons custom"> batterie_alert </ i>	Batterie_Alarm
<i class = "material-icons custom"> batterieladung_voll </ i>	batterieladung voll
<i class = "material-icons custom"> batterievoll </ i>	Batterie voll
<i class = "material-icons custom"> batterie_std </ i>	batterie_std
<i class = "material-icons custom"> batterie_unbekannt </ i>	Batterie_unbekannt
<i class = "material-icons custom"> Bluetooth </ i>	Bluetooth
<i class = "material-icons custom"> bluetooth_connected </ i>	bluetooth_connected
<i class = "material-icons custom"> bluetooth_disabled </ i>	bluetooth_disabled
<i class = "material-icons custom"> bluetooth_searching </ i>	bluetooth_searching
<i class = "material-icons custom"> brightness_auto </ i>	hellheit_auto
<i class = "material-icons custom"> brightness_high </ i>	Helligkeit_hoch
<i class = "material-icons custom"> brightness_low </ i>	Helligkeit_Low
<i class = "material-icons custom"> brightness_medium </ i>	hellheit_medium
<i class = "material-icons custom"> data_usage </ i>	Datenverbrauch
<i class = "material-icons custom"> Entwicklermodus </ i>	Entwicklermodus
<i class = "material-icons custom"> Geräte </ i>	Geräte
<i class = "material-icons custom"> dvr </ i>	dvr
<i class = "material-icons custom"> gps_fixed </ i>	gps_fixed
<i class = "material-icons custom"> gps_not_fixed </ i>	gps_not_fixed
<i class = "material-icons custom"> gps_off </ i>	gps_off
<i class = "material-icons custom"> graphische_eq </ i>	graphic_eq
<i class = "material-icons custom"> location_disabled </ i>	location_disabled
<i class = "material-icons custom"> location_searching </ i>	location_searching
<i class = "material-icons custom"> network_cell </ i>	network_cell
<i class = "material-icons custom"> network_wifi </ i>	network_wifi
<i class = "material-icons custom"> screen_lock_landscape </ i>	screen_lock_landscape
<i class = "material-icons custom"> screen_lock_portrait </ i>	screen_lock_portrait
<i class = "material-icons custom"> screen_lock_rotation </ i>	screen_lock_rotation
<i class = "material-icons custom"> screen_rotation </ i>	Bildschirm Rotation
<i class = "material-icons custom"> sd_storage </ i>	sd_storage
<i class = "material-icons custom"> settings_system_daydream </ i>	settings_system_daydream
<i class = "material-icons custom"> signal_cellular_4_bar </ i>	signal_cellular_4_bar
<i class = "material-icons custom"> wifi_tethering </ i>	wifi_tethering
<i class = "material-icons custom"> signal_cellular_no_sim </ i>	signal_cellular_no_sim
<i class = "material-icons custom"> signal_cellular_null </ i>	signal_cellular_null
<i class = "material-icons custom"> signal_cellular_off </ i>	signal_cellular_off
<i class = "material-icons custom"> signal_wifi_4_bar </ i>	signal_wifi_4_bar
<i class = "material-icons custom"> signal_wifi_4_bar_lock </ i>	signal_wifi_4_bar_lock
<i class = "material-icons custom"> signal_wifi_off </ i>	signal_wifi_off
<i class = "material-icons custom"> Speicher </ i>	Lager
<i class = "material-icons custom"> usb </ i>	USB
<i class = "material-icons custom"> Hintergrundbild </ i>	Hintergrund
<i class = "material-icons custom"> Widgets </ i>	Widgets
<i class = "material-icons custom"> wifi_lock </ i>	wifi_lock
<i class = "material-icons custom"> signal_cellular_connected_no_internet_4_bar </ i>	signal_cellular_connected_no_internet_4_bar