Vật chất - Biểu tượng xã hội

Chương này giải thích cách sử dụng các biểu tượng Xã hội (Vật chất) 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 Xã hội (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"> cake </i>	bánh ngọt
<i class = "material-icon custom"> domain </i>	miền
<i class = "material-icon custom"> group </i>	nhóm
<i class = "material-icon custom"> group_add </i>	group_add
<i class = "material-icon custom"> location_city </i>	location_city
<i class = "material-icon custom"> mood </i>	tâm trạng
<i class = "material-icon custom"> mood_bad </i>	mood_bad
<i class = "material-icon custom"> thông báo </i>	thông báo
<i class = "material-icon custom"> notification_active </i>	thông báo_ hoạt động
<i class = "material-icon custom"> notification_none </i>	thông báo_không
<i class = "material-icon custom"> notification_off </i>	notification_off
<i class = "material-icon custom"> notification_paused </i>	thông báo_ tạm dừng
<i class = "material-icon custom"> trang </i>	trang
<i class = "material-icon custom"> party_mode </i>	chế độ tiệc tùng
<i class = "material-icon custom"> people </i>	Mọi người
<i class = "material-icon custom"> people_outline </i>	people_outline
<i class = "material-icon custom"> người </i>	người
<i class = "material-icon custom"> person_add </i>	person_add
<i class = "material-icon custom"> person_outline </i>	person_outline
<i class = "material-icon custom"> plus_one </i>	cộng một
<i class = "material-icon custom"> thăm dò ý kiến </i>	cuộc thăm dò ý kiến
<i class = "material-icon custom"> public </i>	công cộng
<i class = "material-icon custom"> school </i>	trường học
<i class = "material-icon custom"> share </i>	chia sẻ
<i class = "material-icon custom"> whatshot </i>	có gì nóng