Vật liệu - Biểu tượng Giao tiếp

Chương này giải thích cách sử dụng các biểu tượng Giao tiếp (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 Giao tiếp (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"> kinh doanh </i>	kinh doanh
<i class = "material-icon custom"> call </i>	gọi
<i class = "material-icon custom"> call_made </i>	call_made
<i class = "material-icon custom"> call_merge </i>	call_merge
<i class = "material-icon custom"> call_missed </i>	call_missed
<i class = "material-icon custom"> call_receive </i>	call_reiled
<i class = "material-icon custom"> call_split </i>	call_split
<i class = "material-icon custom"> trò chuyện </i>	trò chuyện
<i class = "material-icon custom"> chat_bubble </i>	chat_bubble
<i class = "material-icon custom"> chat_bubble_outline </i>	chat_bubble_outline
<i class = "material-icon custom"> clear_all </i>	Làm sạch tất cả
<i class = "material-icon custom"> nhận xét </i>	bình luận
<i class = "material-icon custom"> contact_phone </i>	Điện thoại liên hệ
<i class = "material-icon custom"> danh bạ </i>	liên lạc
<i class = "material-icon custom"> dialer_sip </i>	dialer_sip
<i class = "material-icon custom"> bàn phím số </i>	bàn phím quay số
<i class = "material-icon custom"> forum </i>	diễn đàn
<i class = "material-icon custom"> import_export </i>	nhập khẩu xuất khẩu
<i class = "material-icon custom"> invert_colors_off </i>	invert_colors_off
<i class = "material-icon custom"> live_help </i>	trợ giúp trực tuyến
<i class = "material-icon custom"> location_off </i>	location_off
<i class = "material-icon custom"> location_on </i>	location_on
<i class = "material-icon custom"> tin nhắn </i>	thông điệp
<i class = "material-icon custom"> no_sim </i>	không có sim
<i class = "material-icon custom"> phone </i>	điện thoại
<i class = "material-icon custom"> phonelink_erase </i>	phonelink_erase
<i class = "material-icon custom"> phonelink_lock </i>	phonelink_lock
<i class = "material-icon custom"> phonelink_ring </i>	phonelink_ring
<i class = "material-icon custom"> phonelink_setup </i>	phonelink_setup
<i class = "material-icon custom"> portable_wifi_off </i>	portable_wifi_off
<i class = "material-icon custom"> present_to_all </i>	present_to_all
<i class = "material-icon custom"> ring_volume </i>	ring_volume
<i class = "material-icon custom"> speaker_phone </i>	loa_ngoài
<i class = "material-icon custom"> stay_current_landscape </i>	stay_current_landscape
<i class = "material-icon custom"> stay_current_portrait </i>	stay_current_portrait
<i class = "material-icon custom"> stay_primary_landscape </i>	stay_primary_landscape
<i class = "material-icon custom"> stay_primary_portrait </i>	stay_primary_portrait
<i class = "material-icon custom"> swap_calls </i>	swap_calls
<i class = "material-icon custom"> textms </i>	văn bản
<i class = "material-icon custom"> thư thoại </i>	thư thoại
<i class = "material-icon custom"> vpn_key </i>	vpn_key
<i class = "material-icon custom"> email </i>	e-mail
<i class = "material-icon custom"> call_end </i>	call_end