วัสดุ - ไอคอนเนื้อหา

บทนี้อธิบายการใช้ไอคอนเนื้อหา (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"> add_box </i>	add_box
<i class = "material-icons custom"> add_circle </i>	add_circle
<i class = "material-icons custom"> add_circle_outline </i>	add_circle_outline
<i class = "material-icons custom"> เก็บถาวร </i>	เก็บถาวร
<i class = "material-icons custom"> backspace </i>	backspace
<i class = "material-icons custom"> บล็อก </i>	บล็อก
<i class = "material-icons custom"> ล้าง </i>	ชัดเจน
<i class = "material-icons custom"> content_copy </i>	content_copy
<i class = "material-icons custom"> content_cut </i>	content_cut
<i class = "material-icons custom"> content_paste </i>	content_paste
<i class = "material-icons custom"> สร้าง </i>	สร้าง
<i class = "material-icons custom"> แบบร่าง </i>	ร่าง
<i class = "material-icons custom"> filter_list </i>	filter_list
<i class = "material-icons custom"> ตั้งค่าสถานะ </i>	ธง
<i class = "material-icons custom"> font_download </i>	font_download
<i class = "material-icons custom"> ไปข้างหน้า </i>	ไปข้างหน้า
<i class = "material-icons custom"> ท่าทาง </i>	ท่าทาง
<i class = "material-icons custom"> กล่องจดหมาย </i>	กล่องจดหมาย
<i class = "material-icons custom"> ลิงก์ </i>	ลิงค์
<i class = "material-icons custom"> จดหมาย </i>	จดหมาย
<i class = "material-icons custom"> markunread </i>	markunread
<i class = "material-icons custom"> ทำซ้ำ </i>	ทำซ้ำ
<i class = "material-icons custom"> ลบ </i>	ลบ
<i class = "material-icons custom"> remove_circle </i>	remove_circle
<i class = "material-icons custom"> remove_circle_outline </i>	remove_circle_outline
<i class = "material-icons custom"> ตอบกลับ </i>	ตอบ
<i class = "material-icons custom"> reply_all </i>	ตอบทั้งหมด
<i class = "material-icons custom"> รายงาน </i>	รายงาน
<i class = "material-icons custom"> บันทึก </i>	บันทึก
<i class = "material-icons custom"> select_all </i>	เลือกทั้งหมด
<i class = "material-icons custom"> ส่ง </i>	ส่ง
<i class = "material-icons custom"> จัดเรียง </i>	เรียงลำดับ
<i class = "material-icons custom"> text_format </i>	text_format
<i class = "material-icons custom"> stay_current_portrait </i>	stay_current_portrait
<i class = "material-icons custom"> เลิกทำ </i>	เลิกทำ