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

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