পৃষ্ঠাসমূহ

.

Search Your Article

Total Pageviews

Thursday, March 16, 2017

Material - Action Icons

This chapter explains the usage of Google's (Material) Action Icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.
<!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>
The following table contains the usage and results of Google's (Material) Action Icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −
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
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)