Materiał - ikony powiadomień

W tym rozdziale opisano użycie ikon powiadomień Google (o materiałach). Zakładać, żecustom to nazwa klasy CSS, w której zdefiniowaliśmy rozmiar i kolor, jak pokazano w przykładzie podanym poniżej.

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

Poniższa tabela zawiera wykorzystanie i wyniki ikon powiadomień Google (o materiałach). Zastąp tag <body> powyższego programu kodem podanym w tabeli, aby uzyskać odpowiednie wyniki -

Stosowanie	Wynik
<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_ind individual_suite </i>	airline_seat_ind 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"> numer_potwierdzenia </i>	Numer potwierdzenia
<i class = "material-icons custom"> disc_full </i>	disc_full
<i class = "material-icons custom"> do_not_disturb </i>	nie przeszkadzać
<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>	telewizja na żywo
<i class = "material-icons custom"> mms </i>	mms
<i class = "material-icons custom"> więcej </i>	więcej
<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"> moc </i>	moc
<i class = "material-icons custom"> sd_card </i>	sd_card
<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"> synchronizacja </i>	synchronizacja
<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>	aktualizacja systemu
<i class = "material-icons custom"> tap_and_play </i>	tap_and_play
<i class = "material-icons custom"> time_to_leave </i>	czas wyjść
<i class = "material-icons custom"> wibracje </i>	wibracja
<i class = "material-icons custom"> voice_chat </i>	chat głosowy
<i class = "material-icons custom"> vpn_lock </i>	vpn_lock
<i class = "material-icons custom"> wc </i>	toaleta
<i class = "material-icons custom"> wifi </i>	wifi