Vật liệu - Biểu tượng thiết bị

Chương này cung cấp cho bạn cách sử dụng Biểu tượng thiết bị (Vật liệu) của Google. Giả sửcustom là tên lớp CSS mà chúng ta đã xác định kích thước và màu sắc như hình 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 thiết bị (Vật liệu) của Google.

Sử dụng	Kết quả
<i class = "material-icon custom"> access_alarm </i>	access_alarm
<i class = "material-icon custom"> access_alarms </i>	access_alarms
<i class = "material-icon custom"> access_time </i>	thời gian truy cập
<i class = "material-icon custom"> add_alarm </i>	add_alarm
<i class = "material-icon custom"> airplanemode_active </i>	airplanemode_active
<i class = "material-icon custom"> airplanemode_inactive </i>	airplanemode_inactive
<i class = "material-icon custom"> pin_alert </i>	pin_alert
<i class = "material-icon custom"> pin_charging_full </i>	pin_charging_full
<i class = "material-icon custom"> pin_full </i>	Pin đầy
<i class = "material-icon custom"> pin_std </i>	pin_std
<i class = "material-icon custom"> pin_unknown </i>	pin_unknown
<i class = "material-icon custom"> bluetooth </i>	Bluetooth
<i class = "material-icon custom"> bluetooth_connected </i>	bluetooth_connected
<i class = "material-icon custom"> bluetooth_disabled </i>	bluetooth_disabled
<i class = "material-icon custom"> bluetooth_searching </i>	bluetooth_searching
<i class = "material-icon custom"> Bright_auto </i>	độ sáng_auto
<i class = "material-icon custom"> Bright_high </i>	độ sáng_high
<i class = "material-icon custom"> Bright_low </i>	độ sáng
<i class = "material-icon custom"> Bright_medium </i>	Bright_medium
<i class = "material-icon custom"> data_usage </i>	data_usage
<i class = "material-icon custom"> developer_mode </i>	Chế độ nhà phát triển
<i class = "material-icon custom"> thiết bị </i>	thiết bị
<i class = "material-icon custom"> dvr </i>	dvr
<i class = "material-icon custom"> gps_fixed </i>	gps_fixed
<i class = "material-icon custom"> gps_not_fixed </i>	gps_not_fixed
<i class = "material-icon custom"> gps_off </i>	gps_off
<i class = "material-icon custom"> graphic_eq </i>	graphic_eq
<i class = "material-icon custom"> location_disabled </i>	location_disabled
<i class = "material-icon custom"> location_searching </i>	location_searching
<i class = "material-icon custom"> network_cell </i>	network_cell
<i class = "material-icon custom"> network_wifi </i>	network_wifi
<i class = "material-icon custom"> screen_lock_landscape </i>	screen_lock_landscape
<i class = "material-icon custom"> screen_lock_portrait </i>	screen_lock_portrait
<i class = "material-icon custom"> screen_lock_rotation </i>	screen_lock_rotation
<i class = "material-icon custom"> screen_rotation </i>	screen_rotation
<i class = "material-icon custom"> sd_storage </i>	sd_storage
<i class = "material-icon custom"> settings_system_daydream </i>	settings_system_daydream
<i class = "material-icon custom"> signal_cellular_4_bar </i>	signal_cellular_4_bar
<i class = "material-icon custom"> wifi_tethering </i>	wifi_tethering
<i class = "material-icon custom"> signal_cellular_no_sim </i>	signal_cellular_no_sim
<i class = "material-icon custom"> signal_cellular_null </i>	signal_cellular_null
<i class = "material-icon custom"> signal_cellular_off </i>	signal_cellular_off
<i class = "material-icon custom"> signal_wifi_4_bar </i>	signal_wifi_4_bar
<i class = "material-icon custom"> signal_wifi_4_bar_lock </i>	signal_wifi_4_bar_lock
<i class = "material-icon custom"> signal_wifi_off </i>	signal_wifi_off
<i class = "material-icon custom"> lưu trữ </i>	lưu trữ
<i class = "material-icon custom"> usb </i>	USB
<i class = "material-icon custom"> hình nền </i>	hình nền
<i class = "material-icon custom"> widget </i>	vật dụng
<i class = "material-icon custom"> wifi_lock </i>	wifi_lock
<i class = "material-icon custom"> signal_cellular_connected_no_internet_4_bar </i>	signal_cellular_connected_no_internet_4_bar