Vật liệu - Biểu tượng thông báo

Chương này giải thích việc sử dụng các biểu tượng Thông báo (Vật liệu) của Google. Giả sửcustom là tên lớp CSS mà chúng tôi đã xác định kích thước và màu sắc, như được hiển thị trong ví dụ dưới đây.

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

Bảng sau đây chứa cách sử dụng và kết quả của các biểu tượng Thông báo (Vật liệu) của Google. Thay thế thẻ <body> của chương trình trên bằng mã được đưa ra trong bảng để nhận kết quả đầu ra tương ứng -

Sử dụng	Kết quả
<i class = "material-icon custom"> adb </i>	adb
<i class = "material-icon custom"> airline_seat_flat </i>	airline_seat_flat
<i class = "material-icon custom"> airline_seat_flat_angled </i>	airline_seat_flat_angled
<i class = "material-icon custom"> airline_seat_individual_suite </i>	airline_seat_individual_suite
<i class = "material-icon custom"> airline_seat_legroom_rednced </i>	airline_seat_legroom_rednced
<i class = "material-icon custom"> airline_seat_recline_extra </i>	airline_seat_recline_extra
<i class = "material-icon custom"> airline_seat_recline_normal </i>	airline_seat_recline_normal
<i class = "material-icon custom"> bluetooth_audio </i>	bluetooth_audio
<i class = "material-icon custom"> Confirm_number </i>	số xác nhận
<i class = "material-icon custom"> disc_full </i>	disk_full
<i class = "material-icon custom"> do_not_disturb </i>	đừng làm phiền
<i class = "material-icon custom"> do_not_disturb_alt </i>	do_not_disturb_alt
<i class = "material-icon custom"> drive_eta </i>	drive_eta
<i class = "material-icon custom"> event_available </i>	event_available
<i class = "material-icon custom"> event_busy </i>	event_busy
<i class = "material-icon custom"> event_note </i>	event_note
<i class = "material-icon custom"> folder_special </i>	folder_special
<i class = "material-icon custom"> live_tv </i>	truyền hình trực tiếp
<i class = "material-icon custom"> mms </i>	mms
<i class = "material-icon custom"> khác </i>	hơn
<i class = "material-icon custom"> network_locked </i>	network_locked
<i class = "material-icon custom"> ondemand_video </i>	ondemand_video
<i class = "material-icon custom"> personal_video </i>	Personal_video
<i class = "material-icon custom"> phone_bl Bluetooth_speaker </i>	phone_bl Bluetooth_speaker
<i class = "material-icon custom"> phone_nticed </i>	phone_warded
<i class = "material-icon custom"> phone_in_talk </i>	phone_in_talk
<i class = "material-icon custom"> phone_locked </i>	phone_locked
<i class = "material-icon custom"> phone_missed </i>	phone_missed
<i class = "material-icon custom"> phone_paused </i>	phone_paused
<i class = "material-icon custom"> power </i>	quyền lực
<i class = "material-icon custom"> sd_card </i>	thẻ SD
<i class = "material-icon custom"> sim_card_alert </i>	sim_card_alert
<i class = "material-icon custom"> sms </i>	tin nhắn
<i class = "material-icon custom"> sms_failed </i>	sms_failed
<i class = "material-icon custom"> sync </i>	đồng bộ hóa
<i class = "material-icon custom"> sync_disabled </i>	sync_disabled
<i class = "material-icon custom"> sync_problem </i>	sync_problem
<i class = "material-icon custom"> system_update </i>	system_update
<i class = "material-icon custom"> tap_and_play </i>	tap_and_play
<i class = "material-icon custom"> time_to_leave </i>	time_to_leave
<i class = "material-icon custom"> rung </i>	rung động
<i class = "material-icon custom"> voice_chat </i>	voice_chat
<i class = "material-icon custom"> vpn_lock </i>	vpn_lock
<i class = "material-icon custom"> wc </i>	wc
<i class = "material-icon custom"> wifi </i>	wifi