วัสดุ - ไอคอน AV

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

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

การใช้งาน	ผลลัพธ์
<i class = "material-icons custom"> ออกอากาศ </i>	ออกอากาศ
<i class = "material-icons custom"> อัลบั้ม </i>	อัลบั้ม
<i class = "material-icons custom"> av_timer </i>	av_timer
<i class = "material-icons custom"> closed_caption </i>	closed_caption
<i class = "material-icons custom"> อีควอไลเซอร์ </i>	อีควอไลเซอร์
<i class = "material-icons custom"> โจ่งแจ้ง </i>	ชัดเจน
<i class = "material-icons custom"> fast_forward </i>	fast_forward
<i class = "material-icons custom"> fast_rewind </i>	fast_rewind
<i class = "material-icons custom"> forward_10 </i>	forward_10
<i class = "material-icons custom"> forward_30 </i>	forward_30
<i class = "material-icons custom"> forward_5 </i>	forward_5
<i class = "material-icons custom"> เกม </i>	เกม
<i class = "material-icons custom"> hd </i>	hd
<i class = "material-icons custom"> การได้ยิน </i>	การได้ยิน
<i class = "material-icons custom"> คุณภาพสูง </i>	คุณภาพสูง
<i class = "material-icons custom"> library_add </i>	library_add
<i class = "material-icons custom"> library_books </i>	library_books
<i class = "material-icons custom"> library_music </i>	library_music
<i class = "material-icons custom"> วนซ้ำ </i>	วน
<i class = "material-icons custom"> ไมโครโฟน </i>	ไมค์
<i class = "material-icons custom"> mic_none </i>	mic_none
<i class = "material-icons custom"> mic_off </i>	mic_off
<i class = "material-icons custom"> ภาพยนตร์ </i>	ภาพยนตร์
<i class = "material-icons custom"> pause_circle_outline </i>	pause_circle_outline
<i class = "material-icons custom"> new_releases </i>	new_releases
<i class = "material-icons custom"> not_interested </i>	ไม่สนใจ
<i class = "material-icons custom"> หยุดชั่วคราว </i>	หยุด
<i class = "material-icons custom"> pause_circle_filled </i>	pause_circle_filled
<i class = "material-icons custom"> play_arrow </i>	play_arrow
<i class = "material-icons custom"> play_circle_filled </i>	play_circle_filled
<i class = "material-icons custom"> play_circle_outline </i>	play_circle_outline
<i class = "material-icons custom"> playlist_add </i>	playlist_add
<i class = "material-icons custom"> คิว </i>	คิว
<i class = "material-icons custom"> que_music </i>	Que_music
<i class = "material-icons custom"> วิทยุ </i>	วิทยุ
<i class = "material-icons custom"> Recent_actors </i>	Recent_actors
<i class = "material-icons custom"> ทำซ้ำ </i>	ทำซ้ำ
<i class = "material-icons custom"> repeat_one </i>	repeat_one
<i class = "material-icons custom"> เล่นซ้ำ </i>	เล่นซ้ำ
<i class = "material-icons custom"> ออกอากาศ </i>	replay_10
<i class = "material-icons custom"> replay_30 </i>	replay_30
<i class = "material-icons custom"> replay_5 </i>	replay_5
<i class = "material-icons custom"> สับเปลี่ยน </i>	สับเปลี่ยน
<i class = "material-icons custom"> skip_next </i>	skip_next
<i class = "material-icons custom"> skip_previous </i>	skip_previous
<i class = "material-icons custom"> เลื่อนปลุก </i>	งีบหลับ
<i class = "material-icons custom"> sort_by_alpha </i>	sort_by_alpha
<i class = "material-icons custom"> หยุด </i>	หยุด
<i class = "material-icons custom"> คำบรรยาย </i>	คำบรรยาย
<i class = "material-icons custom"> surround_sound </i>	เสียงรอบทิศทาง
<i class = "material-icons custom"> video_library </i>	video_library
<i class = "material-icons custom"> วิดีโอแคม </i>	วิดีโอแคม
<i class = "material-icons custom"> videocam_off </i>	videocam_off
<i class = "material-icons custom"> volume_down </i>	ลดเสียงลง
<i class = "material-icons custom"> volume_mute </i>	volume_mute
<i class = "material-icons custom"> volume_off </i>	volume_off
<i class = "material-icons custom"> volume_up </i>	ปรับระดับเสียงขึ้น
<i class = "material-icons custom"> เว็บ </i>	เว็บ