วัสดุ - ไอคอนการสื่อสาร

บทนี้จะอธิบายการใช้ไอคอนการสื่อสาร (Material) ของ Google สมมติว่าcustom คือชื่อคลาส CSS ที่เรากำหนดขนาดและสีดังแสดงในตัวอย่างด้านล่าง

<!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>

ตารางต่อไปนี้มีการใช้งานและผลลัพธ์ของไอคอนการสื่อสาร (Material) ของ Google แทนที่แท็ก <body> ของโปรแกรมด้านบนด้วยรหัสที่กำหนดในตารางเพื่อรับผลลัพธ์ตามลำดับ -

การใช้งาน	ผลลัพธ์
<i class = "material-icons custom"> ธุรกิจ </i>	ธุรกิจ
<i class = "material-icons custom"> โทร </i>	โทร
<i class = "material-icons custom"> call_made </i>	call_made
<i class = "material-icons custom"> call_merge </i>	call_merge
<i class = "material-icons custom"> call_missed </i>	call_missed
<i class = "material-icons custom"> call_received </i>	call_received
<i class = "material-icons custom"> call_split </i>	call_split
<i class = "material-icons custom"> แชท </i>	แชท
<i class = "material-icons custom"> chat_bubble </i>	chat_bubble
<i class = "material-icons custom"> chat_bubble_outline </i>	chat_bubble_outline
<i class = "material-icons custom"> clear_all </i>	ลบทั้งหมด
<i class = "material-icons custom"> ความคิดเห็น </i>	แสดงความคิดเห็น
<i class = "material-icons custom"> contact_phone </i>	contact_phone
<i class = "material-icons custom"> ผู้ติดต่อ </i>	ผู้ติดต่อ
<i class = "material-icons custom"> dialer_sip </i>	dialer_sip
<i class = "material-icons custom"> แป้นหมายเลข </i>	แป้นหมายเลข
<i class = "material-icons custom"> ฟอรัม </i>	ฟอรัม
<i class = "material-icons custom"> import_export </i>	นำเข้าส่งออก
<i class = "material-icons custom"> invert_colors_off </i>	invert_colors_off
<i class = "material-icons custom"> live_help </i>	live_help
<i class = "material-icons custom"> location_off </i>	location_off
<i class = "material-icons custom"> location_on </i>	location_on
<i class = "material-icons custom"> ข้อความ </i>	ข้อความ
<i class = "material-icons custom"> no_sim </i>	no_sim
<i class = "material-icons custom"> โทรศัพท์ </i>	โทรศัพท์
<i class = "material-icons custom"> phonelink_erase </i>	phonelink_erase
<i class = "material-icons custom"> phonelink_lock </i>	phonelink_lock
<i class = "material-icons custom"> phonelink_ring </i>	phonelink_ring
<i class = "material-icons custom"> phonelink_setup </i>	phonelink_setup
<i class = "material-icons custom"> portable_wifi_off </i>	portable_wifi_off
<i class = "material-icons custom"> present_to_all </i>	present_to_all
<i class = "material-icons custom"> ring_volume </i>	ring_volume
<i class = "material-icons custom"> speaker_phone </i>	speaker_phone
<i class = "material-icons custom"> stay_current_landscape </i>	stay_current_landscape
<i class = "material-icons custom"> stay_current_portrait </i>	stay_current_portrait
<i class = "material-icons custom"> stay_primary_landscape </i>	stay_primary_landscape
<i class = "material-icons custom"> stay_primary_portrait </i>	stay_primary_portrait
<i class = "material-icons custom"> swap_calls </i>	swap_calls
<i class = "material-icons custom"> ข้อความ </i>	ตำรา
<i class = "material-icons custom"> วอยซ์เมล </i>	ข้อความเสียง
<i class = "material-icons custom"> vpn_key </i>	vpn_key
<i class = "material-icons custom"> อีเมล </i>	อีเมล์
<i class = "material-icons custom"> call_end </i>	call_end