Material - Benachrichtigungssymbole

In diesem Kapitel wird die Verwendung der Benachrichtigungssymbole von Google (Material) 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 Benachrichtigungssymbole 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"> adb </ i>	adb
<i class = "material-icons custom"> airline_seat_flat </ i>	airline_seat_flat
<i class = "material-icons custom"> airline_seat_flat_angled </ i>	airline_seat_flat_angled
<i class = "material-icons custom"> airline_seat_individual_suite </ i>	airline_seat_individual_suite
<i class = "material-icons custom"> airline_seat_legroom_reduced </ i>	airline_seat_legroom_reduced
<i class = "material-icons custom"> airline_seat_recline_extra </ i>	airline_seat_recline_extra
<i class = "material-icons custom"> airline_seat_recline_normal </ i>	airline_seat_recline_normal
<i class = "material-icons custom"> bluetooth_audio </ i>	bluetooth_audio
<i class = "material-icons custom"> Bestätigungsnummer </ i>	Bestätigungsnummer
<i class = "material-icons custom"> disc_full </ i>	disc_full
<i class = "material-icons custom"> do_not_disturb </ i>	Störe nicht
<i class = "material-icons custom"> do_not_disturb_alt </ i>	do_not_disturb_alt
<i class = "material-icons custom"> drive_eta </ i>	drive_eta
<i class = "material-icons custom"> event_available </ i>	event_available
<i class = "material-icons custom"> event_busy </ i>	event_busy
<i class = "material-icons custom"> event_note </ i>	event_note
<i class = "material-icons custom"> folder_special </ i>	folder_special
<i class = "material-icons custom"> live_tv </ i>	Live Fernsehen
<i class = "material-icons custom"> mms </ i>	mms
<i class = "material-icons custom"> mehr </ i>	Mehr
<i class = "material-icons custom"> network_locked </ i>	network_locked
<i class = "material-icons custom"> ondemand_video </ i>	ondemand_video
<i class = "material-icons custom"> personal_video </ i>	personal_video
<i class = "material-icons custom"> phone_bluetooth_speaker </ i>	phone_bluetooth_speaker
<i class = "material-icons custom"> phone_forwarded </ i>	phone_forwarded
<i class = "material-icons custom"> phone_in_talk </ i>	phone_in_talk
<i class = "material-icons custom"> phone_locked </ i>	phone_locked
<i class = "material-icons custom"> phone_missed </ i>	phone_missed
<i class = "material-icons custom"> phone_paused </ i>	phone_paused
<i class = "material-icons custom"> power </ i>	Leistung
<i class = "material-icons custom"> sd_card </ i>	SD-Karte
<i class = "material-icons custom"> sim_card_alert </ i>	sim_card_alert
<i class = "material-icons custom"> SMS </ i>	SMS
<i class = "material-icons custom"> sms_failed </ i>	sms_failed
<i class = "material-icons custom"> synchronisieren </ i>	synchronisieren
<i class = "material-icons custom"> sync_disabled </ i>	sync_disabled
<i class = "material-icons custom"> sync_problem </ i>	sync_problem
<i class = "material-icons custom"> system_update </ i>	Systemupdate
<i class = "material-icons custom"> tap_and_play </ i>	tap_and_play
<i class = "material-icons custom"> time_to_leave </ i>	Zeit zu gehen
<i class = "material-icons custom"> Vibration </ i>	Vibration
<i class = "material-icons custom"> voice_chat </ i>	Sprachchat
<i class = "material-icons custom"> vpn_lock </ i>	vpn_lock
<i class = "material-icons custom"> wc </ i>	Toilette
<i class = "material-icons custom"> WLAN </ i>	W-lan