Vật liệu - Biểu tượng phần cứng

Chương này giải thích cách sử dụng các biểu tượng Phần cứng (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 Phần cứng (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"> cast </i>	diễn viên
<i class = "material-icon custom"> cast_connected </i>	cast_connected
<i class = "material-icon custom"> máy tính </i>	máy vi tính
<i class = "material-icon custom"> desktop_mac </i>	desktop_mac
<i class = "material-icon custom"> desktop_windows </i>	desktop_windows
<i class = "material-icon custom"> developer_board </i>	developer_board
<i class = "material-icon custom"> device_hub </i>	device_hub
<i class = "material-icon custom"> dock </i>	bến tàu
<i class = "material-icon custom"> gamepad </i>	gamepad
<i class = "material-icon custom"> tai nghe </i>	tai nghe
<i class = "material-icon custom"> headset_mic </i>	headset_mic
<i class = "material-icon custom"> bàn phím </i>	bàn phím
<i class = "material-icon custom"> keyboard_arrow_down </i>	keyboard_arrow_down
<i class = "material-icon custom"> keyboard_arrow_left </i>	keyboard_arrow_left
<i class = "material-icon custom"> keyboard_arrow_right </i>	keyboard_arrow_right
<i class = "material-icon custom"> keyboard_arrow_up </i>	keyboard_arrow_up
<i class = "material-icon custom"> keyboard_backspace </i>	keyboard_backspace
<i class = "material-icon custom"> keyboard_capslock </i>	keyboard_capslock
<i class = "material-icon custom"> keyboard_hide </i>	keyboard_hide
<i class = "material-icon custom"> keyboard_return </i>	keyboard_return
<i class = "material-icon custom"> keyboard_tab </i>	keyboard_tab
<i class = "material-icon custom"> keyboard_voice </i>	keyboard_voice
<i class = "material-icon custom"> máy tính xách tay </i>	máy tính xách tay
<i class = "material-icon custom"> laptop_chromebook </i>	laptop_chromebook
<i class = "material-icon custom"> laptop_mac </i>	laptop_mac
<i class = "material-icon custom"> laptop_windows </i>	laptop_windows
<i class = "material-icon custom"> memory </i>	ký ức
<i class = "material-icon custom"> chuột </i>	chuột
<i class = "material-icon custom"> phone_android </i>	phone_android
<i class = "material-icon custom"> phone_iphone </i>	phone_iphone
<i class = "material-icon custom"> phonelink </i>	liên kết điện thoại
<i class = "material-icon custom"> phonelink_off </i>	phonelink_off
<i class = "material-icon custom"> power_input </i>	power_input
<i class = "material-icon custom"> bộ định tuyến </i>	bộ định tuyến
<i class = "material-icon custom"> máy quét </i>	máy quét
<i class = "material-icon custom"> bảo mật </i>	Bảo vệ
<i class = "material-icon custom"> sim_card </i>	thẻ SIM
<i class = "material-icon custom"> điện thoại thông minh </i>	điện thoại thông minh
<i class = "material-icon custom"> loa </i>	loa
<i class = "material-icon custom"> speaker_group </i>	Speaker_group
<i class = "material-icon custom"> máy tính bảng </i>	máy tính bảng
<i class = "material-icon custom"> tablet_android </i>	tablet_android
<i class = "material-icon custom"> tablet_mac </i>	tablet_mac
<i class = "material-icon custom"> đồ chơi </i>	đồ chơi
<i class = "material-icon custom"> tv </i>	TV
<i class = "material-icon custom"> watch </i>	đồng hồ đeo tay