材质-动作图标 


材质-动作图标


本章介绍了Google(材料)操作图标的用法。假设custom是我们定义大小和颜色的CSS类名称,如下面的示例所示。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
        
   
    
   
      <i class="material-icons custom">accessibility</i>
   
    

下表包含Google(材料)操作图标的用法和结果。用表中给出的代码替换上面程序的<body>标签,以获取相应的输出-

Usage Result
<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
0



error: 内容受到保护 !!