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

บทนี้อธิบายการใช้ไอคอนเนื้อหา (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> เลิกทำ