Vật liệu - Biểu tượng Nội dung

Chương này giải thích việc sử dụng các biểu tượng Nội dung (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 Nội dung (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"> thêm </i>	thêm vào
<i class = "material-icon custom"> add_box </i>	add_box
<i class = "material-icon custom"> add_circle </i>	add_circle
<i class = "material-icon custom"> add_circle_outline </i>	add_circle_outline
<i class = "material-icon custom"> lưu trữ </i>	kho lưu trữ
<i class = "material-icon custom"> backspace </i>	xóa lùi
<i class = "material-icon custom"> block </i>	khối
<i class = "material-icon custom"> clear </i>	thông thoáng
<i class = "material-icon custom"> content_copy </i>	content_copy
<i class = "material-icon custom"> content_cut </i>	content_cut
<i class = "material-icon custom"> content_paste </i>	content_paste
<i class = "material-icon custom"> tạo </i>	tạo nên
<i class = "material-icon custom"> bản nháp </i>	bản nháp
<i class = "material-icon custom"> filter_list </i>	filter_list
<i class = "material-icon custom"> flag </i>	cờ
<i class = "material-icon custom"> font_download </i>	font_download
<i class = "material-icon custom"> chuyển tiếp </i>	ở đằng trước
<i class = "material-icon custom"> cử chỉ </i>	cử chỉ
<i class = "material-icon custom"> hộp thư đến </i>	hộp thư đến
<i class = "material-icon custom"> liên kết </i>	liên kết
<i class = "material-icon custom"> mail </i>	thư
<i class = "material-icon custom"> markunread </i>	markunread
<i class = "material-icon custom"> làm lại </i>	làm lại
<i class = "material-icon custom"> xóa </i>	tẩy
<i class = "material-icon custom"> remove_circle </i>	remove_circle
<i class = "material-icon custom"> remove_circle_outline </i>	remove_circle_outline
<i class = "material-icon custom"> trả lời </i>	Đáp lại
<i class = "material-icon custom"> reply_all </i>	trả lời tất cả
<i class = "material-icon custom"> báo cáo </i>	báo cáo
<i class = "material-icon custom"> save </i>	tiết kiệm
<i class = "material-icon custom"> select_all </i>	chọn tất cả
<i class = "material-icon custom"> gửi </i>	gửi
<i class = "material-icon custom"> sắp xếp </i>	sắp xếp
<i class = "material-icon custom"> text_format </i>	định dạng văn bản
<i class = "material-icon custom"> stay_current_portrait </i>	stay_current_portrait
<i class = "material-icon custom"> hoàn tác </i>	Hoàn tác