Vật liệu - Biểu tượng điều hướng

Chương này giải thích cách sử dụng các biểu tượng Điều hướ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 Điều hướ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"> ứng dụng </i>	ứng dụng
<i class = "material-icon custom"> arrow_back </i>	arrow_back
<i class = "material-icon custom"> arrow_drop_down </i>	arrow_drop_down
<i class = "material-icon custom"> arrow_drop_down_circle </i>	arrow_drop_down_circle
<i class = "material-icon custom"> arrow_drop_up </i>	arrow_drop_up
<i class = "material-icon custom"> arrow_ntic </i>	arrow_ward
<i class = "material-icon custom"> hủy </i>	hủy bỏ
<i class = "material-icon custom"> kiểm tra </i>	kiểm tra
<i class = "material-icon custom"> chevron_left </i>	chevron_left
<i class = "material-icon custom"> chevron_right </i>	chevron_right
<i class="material-icons custom">close</i>	close
<i class="material-icons custom">expand_less</i>	expand_less
<i class="material-icons custom">expand_more</i>	expand_more
<i class="material-icons custom">fullscreen</i>	fullscreen
<i class="material-icons custom">fullscreen_exit</i>	fullscreen_exit
<i class="material-icons custom">menu</i>	menu
<i class="material-icons custom">more_horiz</i>	more_horiz
<i class="material-icons custom">more_vert</i>	more_vert
<i class="material-icons custom">refresh</i>	refresh