Web Icon - Material - 动作图标

  • 简述

    本章解释了 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">accessibility</i> accessibility
    <i class="material-icons custom">account_balance</i> account_balance
    <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">alarm</i> alarm
    <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> android
    <i class="material-icons custom">announcement</i> announcement
    <i class="material-icons custom">aspect_ratio</i> aspect_ratio
    <i class="material-icons custom">assessment</i> assessment
    <i class="material-icons custom">assignment</i> assignment
    <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">autorenew</i> autorenew
    <i class="material-icons custom">backup</i> backup
    <i class="material-icons custom">book</i> book
    <i class="material-icons custom">bookmark</i> bookmark
    <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">build</i> build
    <i class="material-icons custom">cached</i> cached
    <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">class</i> class
    <i class="material-icons custom">code</i> code
    <i class="material-icons custom">credit_card</i> credit_card
    <i class="material-icons custom">dashboard</i> dashboard
    <i class="material-icons custom">delete</i> delete
    <i class="material-icons custom">description</i> description
    <i class="material-icons custom">dns</i> dns
    <i class="material-icons custom">done</i> done
    <i class="material-icons custom">done_all</i> done_all
    <i class="material-icons custom">eject</i> eject
    <i class="material-icons custom">event</i> event
    <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">explore</i> explore
    <i class="material-icons custom">extension</i> extension
    <i class="material-icons custom">face</i> face
    <i class="material-icons custom">favorite</i> favorite
    <i class="material-icons custom">favorite_border</i> favorite_border
    <i class="material-icons custom">feedback</i> feedback
    <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">grade</i> grade
    <i class="material-icons custom">group_work</i> group_work
    <i class="material-icons custom">help</i> help
    <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">history</i> history
    <i class="material-icons custom">home</i> home
    <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">info</i> info
    <i class="material-icons custom">info_outline</i> info_outline
    <i class="material-icons custom">input</i> input
    <i class="material-icons custom">invert_colors</i> invert_colors
    <i class="material-icons custom">label</i> label
    <i class="material-icons custom">label_outline</i> label_outline
    <i class="material-icons custom">language</i> language
    <i class="material-icons custom">launch</i> launch
    <i class="material-icons custom">list</i> list
    <i class="material-icons custom">lock</i> lock
    <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">loyalty</i> loyalty
    <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> open_in_browser
    <i class="material-icons custom">open_in_new</i> open_in_new
    <i class="material-icons custom">open_with</i> open_with
    <i class="material-icons custom">pageview</i> pageview
    <i class="material-icons custom">payment</i> payment
    <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">polymer</i> polymer
    <i class="material-icons custom">power_settings_new</i> power_settings_new
    <i class="material-icons custom">print</i> print
    <i class="material-icons custom">query_builder</i> query_builder
    <i class="material-icons custom">question_answer</i> question_answer
    <i class="material-icons custom">receipt</i> receipt
    <i class="material-icons custom">redeem</i> redeem
    <i class="material-icons custom">reorder</i> reorder
    <i class="material-icons custom">report_problem</i> report_problem
    <i class="material-icons custom">restore</i> restore
    <i class="material-icons custom">room</i> room
    <i class="material-icons custom">schedule</i> schedule
    <i class="material-icons custom">search</i> search
    <i class="material-icons custom">settings</i> settings
    <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">shop</i> shop
    <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">spellcheck</i> spellcheck
    <i class="material-icons custom">star_rate</i> star_rate
    <i class="material-icons custom">stars</i> stars
    <i class="material-icons custom">store</i> store
    <i class="material-icons custom">subject</i> subject
    <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">tab</i> tab
    <i class="material-icons custom">tab_unselected</i> tab_unselected
    <i class="material-icons custom">theaters</i> theaters
    <i class="material-icons custom">thumb_down</i> thumb_down
    <i class="material-icons custom">thumb_up</i> thumb_up
    <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">today</i> today
    <i class="material-icons custom">toll</i> toll
    <i class="material-icons custom">track_changes</i> track_changes
    <i class="material-icons custom">translate</i> translate
    <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">turned_in</i> turned_in
    <i class="material-icons custom">verified_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">visibility</i> visibility
    <i class="material-icons custom">visibility_off</i> visibility_off
    <i class="material-icons custom">work</i> work
    <i class="material-icons custom">youtube_searched_for</i> youtube_searched_for
    <i class="material-icons custom">zoom_in</i> zoom_in
    <i class="material-icons custom">zoom_out</i> zoom_out