วัสดุ - ไอคอนแก้ไข

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

การใช้งาน ผลลัพธ์
<i class = "material-icons custom"> attach_file </i> แนบไฟล์
<i class = "material-icons custom"> attach_money </i> attach_money
<i class = "material-icons custom"> border_all </i> border_all
<i class = "material-icons custom"> border_bottom </i> border_bottom
<i class = "material-icons custom"> border_clear </i> border_clear
<i class = "material-icons custom"> border_color </i> border_color
<i class = "material-icons custom"> border_horizontal </i> border_horizontal
<i class = "material-icons custom"> border_inner </i> border_inner
<i class = "material-icons custom"> border_left </i> border_left
<i class = "material-icons custom"> border_outer </i> border_outer
<i class = "material-icons custom"> border_right </i> border_right
<i class = "material-icons custom"> border_style </i> border_style
<i class = "material-icons custom"> border_top </i> border_top
<i class = "material-icons custom"> border_vertical </i> border_vertical
<i class = "material-icons custom"> format_align_center </i> format_align_center
<i class = "material-icons custom"> format_align_justify </i> format_align_justify
<i class = "material-icons custom"> format_align_left </i> format_align_left
<i class = "material-icons custom"> format_align_right </i> format_align_right
<i class = "material-icons custom"> format_bold </i> format_bold
<i class = "material-icons custom"> format_clear </i> format_clear
<i class = "material-icons custom"> format_color_fill </i> format_color_fill
<i class = "material-icons custom"> format_color_reset </i> format_color_reset
<i class = "material-icons custom"> format_color_text </i> format_color_text
<i class = "material-icons custom"> format_indent_decrease </i> format_indent_decrease
<i class = "material-icons custom"> format_indent_increase </i> format_indent_increase
<i class = "material-icons custom"> format_italic </i> format_italic
<i class = "material-icons custom"> format_line_spacing </i> format_line_spacing
<i class = "material-icons custom"> format_list_bulleted </i> format_list_bulleted
<i class = "material-icons custom"> format_list_numbered </i> format_list_numbered
<i class = "material-icons custom"> format_paint </i> format_paint
<i class = "material-icons custom"> format_quote </i> format_quote
<i class = "material-icons custom"> format_size </i> format_size
<i class = "material-icons custom"> format_strikethrough </i> format_strikethrough
<i class = "material-icons custom"> format_textdirection_l_to_r </i> format_textdirection_l_to_r
<i class = "material-icons custom"> format_textdirection_r_to_l </i> format_textdirection_r_to_l
<i class = "material-icons custom"> format_underline </i> format_underline
<i class = "material-icons custom"> ฟังก์ชัน </i> ฟังก์ชั่น
<i class = "material-icons custom"> insert_chart </i> insert_chart
<i class = "material-icons custom"> insert_comment </i> insert_comment
<i class = "material-icons custom"> insert_drive_file </i> insert_drive_file
<i class = "material-icons custom"> insert_emoticon </i> insert_emoticon
<i class = "material-icons custom"> insert_invitation </i> insert_invitation
<i class = "material-icons custom"> insert_link </i> insert_link
<i class = "material-icons custom"> insert_photo </i> insert_photo
<i class = "material-icons custom"> merge_type </i> merge_type
<i class = "material-icons custom"> mode_comment </i> mode_comment
<i class = "material-icons custom"> mode_edit </i> mode_edit
<i class = "material-icons custom"> money_off </i> money_off
<i class = "material-icons custom"> เผยแพร่ </i> เผยแพร่
<i class = "material-icons custom"> space_bar </i> space_bar
<i class = "material-icons custom"> strikethrough_s </i> strikethrough_s
<i class = "material-icons custom"> vertical_align_bottom </i> vertical_align_bottom
<i class = "material-icons custom"> vertical_align_center </i> vertical_align_center
<i class = "material-icons custom"> vertical_align_top </i> vertical_align_top
<i class = "material-icons custom"> wrap_text </i> ตัดข้อความ