วัสดุ - ไอคอนการกระทำ

บทนี้จะอธิบายการใช้ไอคอนการกระทำ (วัสดุ) ของ 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"> 3d_rotation </i>	3d_rotation
<i class = "material-icons custom"> การช่วยการเข้าถึง </i>	การเข้าถึง
<i class = "material-icons custom"> account_balance </i>	ยอดเงินในบัญชี
<i class = "material-icons custom"> account_balance_wallet </i>	account_balance_wallet
<i class = "material-icons custom"> account_box </i>	account_box
<i class = "material-icons custom"> account_circle </i>	account_circle
<i class = "material-icons custom"> add_shopping_cart </i>	add_shopping_cart
<i class = "material-icons custom"> นาฬิกาปลุก </i>	นาฬิกาปลุก
<i class = "material-icons custom"> alarm_add </i>	alarm_add
<i class = "material-icons custom"> alarm_off </i>	alarm_off
<i class = "material-icons custom"> alarm_on </i>	alarm_on
<i class = "material-icons custom"> android </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"> assignment_ind </i>	assignment_ind
<i class = "material-icons custom"> assignment_late </i>	assignment_late
<i class = "material-icons custom"> assignment_return </i>	assignment_return
<i class = "material-icons custom"> assignment_returned </i>	assignment_returned
<i class = "material-icons custom"> assignment_turned_in </i>	assignment_turned_in
<i class = "material-icons custom"> ใหม่อัตโนมัติ </i>	autorenew
<i class = "material-icons custom"> สำรองข้อมูล </i>	การสำรองข้อมูล
<i class = "material-icons custom"> หนังสือ </i>	หนังสือ
<i class = "material-icons custom"> บุ๊กมาร์ก </i>	บุ๊คมาร์ค
<i class = "material-icons custom"> bookmark_border </i>	bookmark_border
<i class = "material-icons custom"> bug_report </i>	bug_report
<i class = "material-icons custom"> สร้าง </i>	สร้าง
<i class = "material-icons custom"> แคช </i>	แคช
<i class = "material-icons custom"> camera_enhance </i>	camera_enhance
<i class = "material-icons custom"> card_giftcard </i>	card_giftcard
<i class = "material-icons custom"> card_membership </i>	card_membership
<i class = "material-icons custom"> card_travel </i>	card_travel
<i class = "material-icons custom"> change_history </i>	change_history
<i class = "material-icons custom"> check_circle </i>	check_circle
<i class = "material-icons custom"> chrome_reader_mode </i>	chrome_reader_mode
<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"> คำอธิบาย </i>	คำอธิบาย
<i class = "material-icons custom"> DNS </i>	dns
<i class = "material-icons custom"> เสร็จสิ้น </i>	เสร็จแล้ว
<i class = "material-icons custom"> done_all </i>	done_all
<i class = "material-icons custom"> นำออก </i>	ดีดออก
<i class = "material-icons custom"> เหตุการณ์ </i>	เหตุการณ์
<i class = "material-icons custom"> event_seat </i>	event_seat
<i class = "material-icons custom"> exit_to_app </i>	exit_to_app
<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"> favorite_border </i>	favorite_border
<i class = "material-icons custom"> ข้อเสนอแนะ </i>	ข้อเสนอแนะ
<i class = "material-icons custom"> find_in_page </i>	find_in_page
<i class = "material-icons custom"> find_replace </i>	find_replace
<i class = "material-icons custom"> flight_land </i>	flight_land
<i class = "material-icons custom"> flight_takeoff </i>	flight_takeoff
<i class = "material-icons custom"> flip_to_back </i>	flip_to_back
<i class = "material-icons custom"> flip_to_front </i>	flip_to_front
<i class = "material-icons custom"> get_app </i>	get_app
<i class = "material-icons custom"> gif </i>	gif
<i class = "material-icons custom"> เกรด </i>	เกรด
<i class = "material-icons custom"> group_work </i>	งานกลุ่ม
<i class = "material-icons custom"> ความช่วยเหลือ </i>	ช่วยด้วย
<i class = "material-icons custom"> help_outline </i>	help_outline
<i class = "material-icons custom"> highlight_off </i>	highlight_off
<i class = "material-icons custom"> ประวัติ </i>	ประวัติศาสตร์
<i class = "material-icons custom"> บ้าน </i>	บ้าน
<i class = "material-icons custom"> hourglass_empty </i>	hourglass_empty
<i class = "material-icons custom"> hourglass_full </i>	hourglass_full
<i class = "material-icons custom"> http </i>	http
<i class = "material-icons custom"> https </i>	https
<i class = "material-icons custom"> ข้อมูล </i>	ข้อมูล
<i class = "material-icons custom"> info_outline </i>	info_outline
<i class = "material-icons custom"> อินพุต </i>	อินพุต
<i class = "material-icons custom"> invert_colors </i>	invert_colors
<i class = "material-icons custom"> ป้ายกำกับ </i>	ฉลาก
<i class = "material-icons custom"> label_outline </i>	label_outline
<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"> lock_open </i>	lock_open
<i class = "material-icons custom"> lock_outline </i>	lock_outline
<i class = "material-icons custom"> ความภักดี </i>	ความภักดี
<i class = "material-icons custom"> markunread_mailbox </i>	markunread_mailbox
<i class = "material-icons custom"> note_add </i>	note_add
<i class = "material-icons custom"> offline_pin </i>	Offline_pin
<i class = "material-icons custom"> open_in_browser </i>	เปิดในเบราว์เซอร์
<i class = "material-icons custom"> open_in_new </i>	open_in_new
<i class = "material-icons custom"> open_with </i>	เปิดด้วย
<i class = "material-icons custom"> การดูหน้าเว็บ </i>	การดูหน้าเว็บ
<i class = "material-icons custom"> การชำระเงิน </i>	การชำระเงิน
<i class = "material-icons custom"> perm_camera_mic </i>	perm_camera_mic
<i class = "material-icons custom"> perm_contact_cale </i>	perm_contact_cale
<i class = "material-icons custom"> perm_data_settings </i>	perm_data_settings
<i class = "material-icons custom"> perm_device_information </i>	perm_device_information
<i class = "material-icons custom"> perm_identity </i>	perm_identity
<i class = "material-icons custom"> perm_media </i>	perm_media
<i class = "material-icons custom"> perm_phone_msg </i>	perm_phone_msg
<i class = "material-icons custom"> perm_scan_wifi </i>	perm_scan_wifi
<i class = "material-icons custom"> picture_in_picture </i>	picture_in_picture
<i class = "material-icons custom"> play_for_work </i>	play_for_work
<i class = "material-icons custom"> โพลีเมอร์ </i>	พอลิเมอร์
<i class = "material-icons custom"> power_settings_new </i>	power_settings_new
<i class = "material-icons custom"> พิมพ์ </i>	พิมพ์
<i class = "material-icons custom"> query_builder </i>	query_builder
<i class = "material-icons custom"> question_answer </i>	คำถามคำตอบ
<i class = "material-icons custom"> ใบเสร็จ </i>	ใบเสร็จรับเงิน
<i class = "material-icons custom"> แลก </i>	แลก
<i class = "material-icons custom"> จัดลำดับใหม่ </i>	จัดลำดับใหม่
<i class = "material-icons custom"> report_problem </i>	report_problem
<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"> settings_applications </i>	settings_applications
<i class = "material-icons custom"> settings_bluetooth </i>	settings_bluetooth
<i class = "material-icons custom"> settings_brightness </i>	settings_brightness
<i class = "material-icons custom"> settings_cell </i>	settings_cell
<i class = "material-icons custom"> settings_ethernet </i>	settings_ethernet
<i class = "material-icons custom"> settings_input_antenna </i>	settings_input_antenna
<i class = "material-icons custom"> settings_input_component </i>	settings_input_component
<i class = "material-icons custom"> settings_input_hdmi </i>	settings_input_hdmi
<i class = "material-icons custom"> settings_input_svideo </i>	settings_input_svideo
<i class = "material-icons custom"> settings_overscan </i>	settings_overscan
<i class = "material-icons custom"> settings_phone </i>	settings_phone
<i class = "material-icons custom"> settings_power </i>	settings_power
<i class = "material-icons custom"> settings_remote </i>	settings_remote
<i class = "material-icons custom"> settings_voice </i>	settings_voice
<i class = "material-icons custom"> ร้านค้า </i>	ร้านค้า
<i class = "material-icons custom"> shop_two </i>	shop_two
<i class = "material-icons custom"> shopping_basket </i>	shopping_basket
<i class = "material-icons custom"> shopping_cart </i>	shopping_cart
<i class = "material-icons custom"> speaker_notes </i>	speaker_notes
<i class = "material-icons custom"> ตรวจการสะกด </i>	ตรวจสอบการสะกด
<i class = "material-icons custom"> star_rate </i>	star_rate
<i class = "material-icons custom"> ดาว </i>	ดาว
<i class = "material-icons custom"> จัดเก็บ </i>	เก็บ
<i class = "material-icons custom"> เรื่อง </i>	เรื่อง
<i class = "material-icons custom"> Supervisor_account </i>	Supervisor_account
<i class = "material-icons custom"> swap_horiz </i>	swap_horiz
<i class = "material-icons custom"> swap_vert </i>	swap_vert
<i class = "material-icons custom"> swap_vertical_circle </i>	swap_vertical_circle
<i class = "material-icons custom"> system_update_alt </i>	system_update_alt
<i class = "material-icons custom"> แท็บ </i>	แท็บ
<i class = "material-icons custom"> tab_unselected </i>	tab_unselected
<i class = "material-icons custom"> โรงภาพยนตร์ </i>	โรงภาพยนตร์
<i class = "material-icons custom"> thumb_down </i>	thumb_down
<i class = "material-icons custom"> thumb_up </i>	นิ้วหัวแม่มือขึ้น
<i class = "material-icons custom"> thumbs_up_down </i>	thumbs_up_down
<i class = "material-icons custom"> toc </i>	toc
<i class = "material-icons custom"> วันนี้ </i>	วันนี้
<i class = "material-icons custom"> ค่าผ่านทาง </i>	โทร
<i class = "material-icons custom"> track_changes </i>	track_changes
<i class = "material-icons custom"> แปล </i>	แปลภาษา
<i class = "material-icons custom"> trending_down </i>	trending_down
<i class = "material-icons custom"> trending_flat </i>	trending_flat
<i class = "material-icons custom"> trending_up </i>	trending_up
<i class = "material-icons custom"> turn_in </i>	หันมา
<i class = "material-icons custom"> valid_user </i>	Verified_user
<i class = "material-icons custom"> view_agenda </i>	view_agenda
<i class = "material-icons custom"> view_array </i>	view_array
<i class = "material-icons custom"> view_carousel </i>	view_carousel
<i class = "material-icons custom"> view_column </i>	view_column
<i class = "material-icons custom"> view_day </i>	view_day
<i class = "material-icons custom"> view_headline </i>	view_headline
<i class = "material-icons custom"> view_list </i>	view_list
<i class = "material-icons custom"> view_module </i>	view_module
<i class = "material-icons custom"> view_quilt </i>	view_quilt
<i class = "material-icons custom"> view_stream </i>	view_stream
<i class = "material-icons custom"> view_week </i>	view_week
<i class = "material-icons custom"> การเปิดเผย </i>	ทัศนวิสัย
<i class = "material-icons custom"> visibility_off </i>	visibility_off
<i class = "material-icons custom"> งาน </i>	งาน
<i class = "material-icons custom"> youtube_searched_for </i>	youtube_searched_for
<i class = "material-icons custom"> zoom_in </i>	ขยายเข้า
<i class = "material-icons custom"> zoom_out </i>	ซูมออก