วัสดุ - ไอคอนฮาร์ดแวร์

บทนี้จะอธิบายการใช้ไอคอนฮาร์ดแวร์ (วัสดุ) ของ 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>

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

การใช้งาน ผลลัพธ์
<i class = "material-icons custom"> แคสต์ </i> นักแสดง
<i class = "material-icons custom"> cast_connected </i> cast_connected
<i class = "material-icons custom"> คอมพิวเตอร์ </i> คอมพิวเตอร์
<i class = "material-icons custom"> desktop_mac </i> desktop_mac
<i class = "material-icons custom"> desktop_windows </i> desktop_windows
<i class = "material-icons custom"> developer_board </i> developer_board
<i class = "material-icons custom"> device_hub </i> device_hub
<i class = "material-icons custom"> ท่าเรือ </i> ท่าเรือ
<i class = "material-icons custom"> แป้นเกม </i> เกมแพด
<i class = "material-icons custom"> ชุดหูฟัง </i> ชุดหูฟัง
<i class = "material-icons custom"> headset_mic </i> headset_mic
<i class = "material-icons custom"> แป้นพิมพ์ </i> แป้นพิมพ์
<i class = "material-icons custom"> keyboard_arrow_down </i> keyboard_arrow_down
<i class = "material-icons custom"> keyboard_arrow_left </i> keyboard_arrow_left
<i class = "material-icons custom"> keyboard_arrow_right </i> keyboard_arrow_right
<i class = "material-icons custom"> keyboard_arrow_up </i> keyboard_arrow_up
<i class = "material-icons custom"> keyboard_backspace </i> keyboard_backspace
<i class = "material-icons custom"> keyboard_capslock </i> keyboard_capslock
<i class = "material-icons custom"> keyboard_hide </i> keyboard_hide
<i class = "material-icons custom"> keyboard_return </i> keyboard_return
<i class = "material-icons custom"> keyboard_tab </i> keyboard_tab
<i class = "material-icons custom"> keyboard_voice </i> keyboard_voice
<i class = "material-icons custom"> แล็ปท็อป </i> แล็ปท็อป
<i class = "material-icons custom"> laptop_chromebook </i> laptop_chromebook
<i class = "material-icons custom"> laptop_mac </i> laptop_mac
<i class = "material-icons custom"> laptop_windows </i> laptop_windows
<i class = "material-icons custom"> หน่วยความจำ </i> หน่วยความจำ
<i class = "material-icons custom"> เมาส์ </i> เมาส์
<i class = "material-icons custom"> phone_android </i> phone_android
<i class = "material-icons custom"> phone_iphone </i> phone_iphone
<i class = "material-icons custom"> phonelink </i> phonelink
<i class = "material-icons custom"> phonelink_off </i> phonelink_off
<i class = "material-icons custom"> power_input </i> power_input
<i class = "material-icons custom"> เราเตอร์ </i> เราเตอร์
<i class = "material-icons custom"> สแกนเนอร์ </i> สแกนเนอร์
<i class = "material-icons custom"> ความปลอดภัย </i> ความปลอดภัย
<i class = "material-icons custom"> sim_card </i> ซิมการ์ด
<i class = "material-icons custom"> สมาร์ทโฟน </i> สมาร์ทโฟน
<i class = "material-icons custom"> ลำโพง </i> ลำโพง
<i class = "material-icons custom"> speaker_group </i> speaker_group
<i class = "material-icons custom"> แท็บเล็ต </i> ยาเม็ด
<i class = "material-icons custom"> tablet_android </i> tablet_android
<i class = "material-icons custom"> tablet_mac </i> tablet_mac
<i class = "material-icons custom"> ของเล่น </i> ของเล่น
<i class = "material-icons custom"> ทีวี </i> โทรทัศน์
<i class = "material-icons custom"> ดู </i> ดู