Material - 操作图标

本章解释 Google (Material) 操作图标的使用方法。假设 `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 (Material) 操作图标的使用方法和结果。将上面程序的 <body> 标签替换成表中给出的代码，即可获得相应的结果：

使用方法	结果
<i class="material-icons custom">3d_rotation</i>
<i class="material-icons custom">accessibility</i>
<i class="material-icons custom">account_balance</i>
<i class="material-icons custom">account_balance_wallet</i>
<i class="material-icons custom">account_box</i>
<i class="material-icons custom">account_circle</i>
<i class="material-icons custom">add_shopping_cart</i>
<i class="material-icons custom">alarm</i>
<i class="material-icons custom">alarm_add</i>
<i class="material-icons custom">alarm_off</i>
<i class="material-icons custom">alarm_on</i>
<i class="material-icons custom">android</i>
<i class="material-icons custom">announcement</i>
<i class="material-icons custom">aspect_ratio</i>
<i class="material-icons custom">assessment</i>
<i class="material-icons custom">assignment</i>
<i class="material-icons custom">assignment_ind</i>
<i class="material-icons custom">assignment_late</i>
<i class="material-icons custom">assignment_return</i>
<i class="material-icons custom">assignment_returned</i>
<i class="material-icons custom">assignment_turned_in</i>
<i class="material-icons custom">autorenew</i>
<i class="material-icons custom">backup</i>
<i class="material-icons custom">book</i>
<i class="material-icons custom">bookmark</i>
<i class="material-icons custom">bookmark_border</i>
<i class="material-icons custom">bug_report</i>
<i class="material-icons custom">build</i>
<i class="material-icons custom">cached</i>
<i class="material-icons custom">camera_enhance</i>
<i class="material-icons custom">card_giftcard</i>
<i class="material-icons custom">card_membership</i>
<i class="material-icons custom">card_travel</i>
<i class="material-icons custom">change_history</i>
<i class="material-icons custom">check_circle</i>
<i class="material-icons custom">chrome_reader_mode</i>
<i class="material-icons custom">class</i>
<i class="material-icons custom">code</i>
<i class="material-icons custom">credit_card</i>
<i class="material-icons custom">dashboard</i>
<i class="material-icons custom">delete</i>
<i class="material-icons custom">description</i>
<i class="material-icons custom">dns</i>
<i class="material-icons custom">done</i>
<i class="material-icons custom">done_all</i>
<i class="material-icons custom">eject</i>
<i class="material-icons custom">event</i>
<i class="material-icons custom">event_seat</i>
<i class="material-icons custom">exit_to_app</i>
<i class="material-icons custom">explore</i>
<i class="material-icons custom">extension</i>
<i class="material-icons custom">face</i>
<i class="material-icons custom">favorite</i>
<i class="material-icons custom">favorite_border</i>
<i class="material-icons custom">feedback</i>
<i class="material-icons custom">find_in_page</i>
<i class="material-icons custom">find_replace</i>
<i class="material-icons custom">flight_land</i>
<i class="material-icons custom">flight_takeoff</i>
<i class="material-icons custom">flip_to_back</i>
<i class="material-icons custom">flip_to_front</i>
<i class="material-icons custom">get_app</i>
<i class="material-icons custom">gif</i>
<i class="material-icons custom">grade</i>
<i class="material-icons custom">group_work</i>
<i class="material-icons custom">help</i>
<i class="material-icons custom">help_outline</i>
<i class="material-icons custom">highlight_off</i>
<i class="material-icons custom">history</i>
<i class="material-icons custom">home</i>
<i class="material-icons custom">hourglass_empty</i>
<i class="material-icons custom">hourglass_full</i>
<i class="material-icons custom">http</i>
<i class="material-icons custom">https</i>
<i class="material-icons custom">info</i>
<i class="material-icons custom">info_outline</i>
<i class="material-icons custom">input</i>
<i class="material-icons custom">invert_colors</i>
<i class="material-icons custom">label</i>
<i class="material-icons custom">label_outline</i>
<i class="material-icons custom">language</i>
<i class="material-icons custom">launch</i>
<i class="material-icons custom">list</i>
<i class="material-icons custom">lock</i>
<i class="material-icons custom">lock_open</i>
<i class="material-icons custom">lock_outline</i>
<i class="material-icons custom">loyalty</i>
<i class="material-icons custom">markunread_mailbox</i>
<i class="material-icons custom">note_add</i>
<i class="material-icons custom">offline_pin</i>
<i class="material-icons custom">open_in_browser</i>
<i class="material-icons custom">open_in_new</i>
<i class="material-icons custom">open_with</i>
<i class="material-icons custom">pageview</i>
<i class="material-icons custom">payment</i>
<i class="material-icons custom">perm_camera_mic</i>
<i class="material-icons custom">perm_contact_cale</i>
<i class="material-icons custom">perm_data_settings</i>
<i class="material-icons custom">perm_device_information</i>
<i class="material-icons custom">perm_identity</i>
<i class="material-icons custom">perm_media</i>
<i class="material-icons custom">perm_phone_msg</i>
<i class="material-icons custom">perm_scan_wifi</i>
<i class="material-icons custom">picture_in_picture</i>
<i class="material-icons custom">play_for_work</i>
<i class="material-icons custom">polymer</i>
<i class="material-icons custom">power_settings_new</i>
<i class="material-icons custom">print</i>
<i class="material-icons custom">query_builder</i>
<i class="material-icons custom">question_answer</i>
<i class="material-icons custom">receipt</i>
<i class="material-icons custom">redeem</i>
<i class="material-icons custom">reorder</i>
<i class="material-icons custom">report_problem</i>
<i class="material-icons custom">restore</i>
<i class="material-icons custom">room</i>
<i class="material-icons custom">schedule</i>
<i class="material-icons custom">search</i>
<i class="material-icons custom">settings</i>
<i class="material-icons custom">settings_applications</i>
<i class="material-icons custom">settings_bluetooth</i>
<i class="material-icons custom">settings_brightness</i>
<i class="material-icons custom">settings_cell</i>
<i class="material-icons custom">settings_ethernet</i>
<i class="material-icons custom">settings_input_antenna</i>
<i class="material-icons custom">settings_input_component</i>
<i class="material-icons custom">settings_input_hdmi</i>
<i class="material-icons custom">settings_input_svideo</i>
<i class="material-icons custom">settings_overscan</i>
<i class="material-icons custom">settings_phone</i>
<i class="material-icons custom">settings_power</i>
<i class="material-icons custom">settings_remote</i>
<i class="material-icons custom">settings_voice</i>
<i class="material-icons custom">shop</i>
<i class="material-icons custom">shop_two</i>
<i class="material-icons custom">shopping_basket</i>
<i class="material-icons custom">shopping_cart</i>
<i class="material-icons custom">speaker_notes</i>
<i class="material-icons custom">spellcheck</i>
<i class="material-icons custom">star_rate</i>
<i class="material-icons custom">stars</i>
<i class="material-icons custom">store</i>
<i class="material-icons custom">subject</i>
<i class="material-icons custom">supervisor_account</i>
<i class="material-icons custom">swap_horiz</i>
<i class="material-icons custom">swap_vert</i>
<i class="material-icons custom">swap_vertical_circle</i>
<i class="material-icons custom">system_update_alt</i>
<i class="material-icons custom">tab</i>
<i class="material-icons custom">tab_unselected</i>
<i class="material-icons custom">theaters</i>
<i class="material-icons custom">thumb_down</i>
<i class="material-icons custom">thumb_up</i>
<i class="material-icons custom">thumbs_up_down</i>
<i class="material-icons custom">toc</i>
<i class="material-icons custom">today</i>
<i class="material-icons custom">toll</i>
<i class="material-icons custom">track_changes</i>
<i class="material-icons custom">translate</i>
<i class="material-icons custom">trending_down</i>
<i class="material-icons custom">trending_flat</i>
<i class="material-icons custom">trending_up</i>
<i class="material-icons custom">turned_in</i>
<i class="material-icons custom">verified_user</i>
<i class="material-icons custom">view_agenda</i>
<i class="material-icons custom">view_array</i>
<i class="material-icons custom">view_carousel</i>
<i class="material-icons custom">view_column</i>
<i class="material-icons custom">view_day</i>
<i class="material-icons custom">view_headline</i>
<i class="material-icons custom">view_list</i>
<i class="material-icons custom">view_module</i>
<i class="material-icons custom">view_quilt</i>
<i class="material-icons custom">view_stream</i>
<i class="material-icons custom">view_week</i>
<i class="material-icons custom">visibility</i>
<i class="material-icons custom">visibility_off</i>
<i class="material-icons custom">work</i>
<i class="material-icons custom">youtube_searched_for</i>
<i class="material-icons custom">zoom_in</i>
<i class="material-icons custom">zoom_out</i>

打印页面