Here we will learn google material design action icons with examples and different types of action icons (account, rotation, alarm, book, class, code, done, face fingerprint, history, home, lock, office, etc) in google material design with examples.
In material design, Google provides different types of action icons which are question answer, print, payment, room, search, shop, stars, translate, zoom in / out, etc.
The following table shows different types of action icons available in google material design.
Name | Usage Description | Icon | Example |
---|---|---|---|
3d rotation | <i class="material-icons">3d_rotation</i> | 3d_rotation | DEMO |
accessibility | <i class="material-icons">accessibility</i> | accessibility | DEMO |
accessible | <i class="material-icons">accessible</i> | accessible | DEMO |
account balance | <i class="material-icons">account_balance</i> | account_balance | DEMO |
account balance wallet | <i class="material-icons">account_balance_wallet</i> | account_balance_wallet | DEMO |
account box | <i class="material-icons">account_box</i> | account_box | DEMO |
account circle | <i class="material-icons">account_circle</i> | account_circle | DEMO |
add shopping cart | <i class="material-icons">add_shopping_cart</i> | add_shopping_cart | DEMO |
alarm | <i class="material-icons">alarm</i> | alarm | DEMO |
alarm add | <i class="material-icons">alarm_add</i> | alarm_add | DEMO |
alarm off | <i class="material-icons">alarm_off</i> | alarm_off | DEMO |
alarm on | <i class="material-icons">alarm_on</i> | alarm_on | DEMO |
all out | <i class="material-icons">all_out</i> | all_out | DEMO |
android | <i class="material-icons">android</i> | android | DEMO |
aspect ratio | <i class="material-icons">aspect_ratio</i> | aspect_ratio | DEMO |
assessment | <i class="material-icons">assessment</i> | assessment | DEMO |
assignment | <i class="material-icons">assignment</i> | assignment | DEMO |
assignment ind | <i class="material-icons">assignment_ind</i> | assignment_ind | DEMO |
assignment late | <i class="material-icons">assignment_late</i> | assignment_late | DEMO |
assignment return | <i class="material-icons">assignment_return</i> | assignment_return | DEMO |
assignment returned | <i class="material-icons">assignment_returned</i> | assignment_returned | DEMO |
assignment turned in | <i class="material-icons">assignment_turned_in</i> | assignment_turned_in | DEMO |
autorenew | <i class="material-icons">autorenew</i> | autorenew | DEMO |
backup | <i class="material-icons">backup</i> | backup | DEMO |
book | <i class="material-icons">book</i> | book | DEMO |
bookmark | <i class="material-icons">bookmark</i> | bookmark | DEMO |
bookmark border | <i class="material-icons">bookmark_border</i> | bookmark_border | DEMO |
bug report | <i class="material-icons">bug_report</i> | bug_report | DEMO |
build | <i class="material-icons">build</i> | build | DEMO |
cached | <i class="material-icons">cached</i> | cached | DEMO |
camera enhance | <i class="material-icons">camera_enhance</i> | camera_enhance | DEMO |
card giftcard | <i class="material-icons">card_giftcard</i> | card_giftcard | DEMO |
card membership | <i class="material-icons">card_membership</i> | card_membership | DEMO |
card travel | <i class="material-icons">card_travel</i> | card_travel | DEMO |
change history | <i class="material-icons">change_history</i> | change_history | DEMO |
check circle | <i class="material-icons">check_circle</i> | check_circle | DEMO |
chrome reader mode | <i class="material-icons">chrome_reader_mode</i> | chrome_reader_mode | DEMO |
class | <i class="material-icons">class</i> | class | DEMO |
code | <i class="material-icons">code</i> | code | DEMO |
compare arrows | <i class="material-icons">compare_arrows</i> | compare_arrows | DEMO |
copyright | <i class="material-icons">copyright</i> | copyright | DEMO |
credit card | <i class="material-icons">credit_card</i> | credit_card | DEMO |
dashboard | <i class="material-icons">dashboard</i> | dashboard | DEMO |
date range | <i class="material-icons">date_range</i> | date_range | DEMO |
delete | <i class="material-icons">delete</i> | delete | DEMO |
delete forever | <i class="material-icons">delete_forever</i> | delete_forever | DEMO |
description | <i class="material-icons">description</i> | description | DEMO |
dns | <i class="material-icons">dns</i> | dns | DEMO |
done | <i class="material-icons">done</i> | done | DEMO |
done all | <i class="material-icons">done_all</i> | done_all | DEMO |
donut large | <i class="material-icons">donut_large</i> | donut_large | DEMO |
donut small | <i class="material-icons">donut_small</i> | donut_small | DEMO |
eject | <i class="material-icons">eject</i> | eject | DEMO |
euro symbol | <i class="material-icons">euro_symbol</i> | euro_symbol | DEMO |
event | <i class="material-icons">event</i> | event | DEMO |
event seat | <i class="material-icons">event_seat</i> | event_seat | DEMO |
exit to app | <i class="material-icons">exit_to_app</i> | exit_to_app | DEMO |
explore | <i class="material-icons">explore</i> | explore | DEMO |
extension | <i class="material-icons">extension</i> | extension | DEMO |
face | <i class="material-icons">face</i> | face | DEMO |
favorite | <i class="material-icons">favorite</i> | favorite | DEMO |
favorite border | <i class="material-icons">favorite_border</i> | favorite_border | DEMO |
feedback | <i class="material-icons">feedback</i> | feedback | DEMO |
find in page | <i class="material-icons">find_in_page</i> | find_in_page | DEMO |
find replace | <i class="material-icons">find_replace</i> | find_replace | DEMO |
fingerprint | <i class="material-icons">fingerprint</i> | fingerprint | DEMO |
flight land | <i class="material-icons">flight_land</i> | flight_land | DEMO |
flight takeoff | <i class="material-icons">flight_takeoff</i> | flight_takeoff | DEMO |
flip to back | <i class="material-icons">flip_to_back</i> | flip_to_back | DEMO |
flip to front | <i class="material-icons">flip_to_front</i> | flip_to_front | DEMO |
g translate | <i class="material-icons">g_translate</i> | g_translate | DEMO |
gavel | <i class="material-icons">gavel</i> | gavel | DEMO |
get app | <i class="material-icons">get_app</i> | get_app | DEMO |
gif | <i class="material-icons">gif</i> | gif | DEMO |
grade | <i class="material-icons">grade</i> | grade | DEMO |
group work | <i class="material-icons">group_work</i> | group_work | DEMO |
help | <i class="material-icons">help</i> | help | DEMO |
help outline | <i class="material-icons">help_outline</i> | help_outline | DEMO |
highlight off | <i class="material-icons">highlight_off</i> | highlight_off | DEMO |
history | <i class="material-icons">history</i> | history | DEMO |
home | <i class="material-icons">home</i> | home | DEMO |
hourglass empty | <i class="material-icons">hourglass_empty</i> | hourglass_empty | DEMO |
hourglass full | <i class="material-icons">hourglass_full</i> | hourglass_full | DEMO |
http | <i class="material-icons">http</i> | http | DEMO |
https | <i class="material-icons">https</i> | https | DEMO |
important devices | <i class="material-icons">important_devices</i> | important_devices | DEMO |
info | <i class="material-icons">info</i> | info | DEMO |
info outline | <i class="material-icons">info_outline</i> | info_outline | DEMO |
input | <i class="material-icons">input</i> | input | DEMO |
invert colors | <i class="material-icons">invert_colors</i> | invert_colors | DEMO |
label | <i class="material-icons">label</i> | label | DEMO |
label outline | <i class="material-icons">label_outline</i> | label_outline | DEMO |
language | <i class="material-icons">language</i> | language | DEMO |
launch | <i class="material-icons">launch</i> | launch | DEMO |
lightbulb outline | <i class="material-icons">lightbulb_outline</i> | lightbulb_outline | DEMO |
line style | <i class="material-icons">line_style</i> | line_style | DEMO |
line weight | <i class="material-icons">line_weight</i> | line_weight | DEMO |
list | <i class="material-icons">list</i> | list | DEMO |
lock | <i class="material-icons">lock</i> | lock | DEMO |
lock open | <i class="material-icons">lock_open</i> | lock_open | DEMO |
lock outline | <i class="material-icons">lock_outline</i> | lock_outline | DEMO |
loyalty | <i class="material-icons">loyalty</i> | loyalty | DEMO |
markunread mailbox | <i class="material-icons">markunread_mailbox</i> | markunread_mailbox | DEMO |
motorcycle | <i class="material-icons">motorcycle</i> | motorcycle | DEMO |
note add | <i class="material-icons">note_add</i> | note_add | DEMO |
offline pin | <i class="material-icons">offline_pin</i> | offline_pin | DEMO |
opacity | <i class="material-icons">opacity</i> | opacity | DEMO |
open in browser | <i class="material-icons">open_in_browser</i> | open_in_browser | DEMO |
open in new | <i class="material-icons">open_in_new</i> | open_in_new | DEMO |
open with | <i class="material-icons">open_with</i> | open_with | DEMO |
pageview | <i class="material-icons">pageview</i> | pageview | DEMO |
pan tool | <i class="material-icons">pan_tool</i> | pan_tool | DEMO |
payment | <i class="material-icons">payment</i> | payment | DEMO |
perm camera mic | <i class="material-icons">perm_camera_mic</i> | perm_camera_mic | DEMO |
perm contact calendar | <i class="material-icons">perm_contact_calendar</i> | perm_contact_calendar | DEMO |
perm data setting | <i class="material-icons">perm_data_setting</i> | perm_data_setting | DEMO |
perm device information | <i class="material-icons">perm_device_information</i> | perm_device_information | DEMO |
perm identity | <i class="material-icons">perm_identity</i> | perm_identity | DEMO |
perm media | <i class="material-icons">perm_media</i> | perm_media | DEMO |
perm phone msg | <i class="material-icons">perm_phone_msg</i> | perm_phone_msg | DEMO |
perm scan wifi | <i class="material-icons">perm_scan_wifi</i> | perm_scan_wifi | DEMO |
pets | <i class="material-icons">pets</i> | pets | DEMO |
picture in picture | <i class="material-icons">picture_in_picture</i> | picture_in_picture | DEMO |
picture in picture alt | <i class="material-icons">picture_in_picture_alt</i> | picture_in_picture_alt | DEMO |
play for work | <i class="material-icons">play_for_work</i> | play_for_work | DEMO |
polymer | <i class="material-icons">polymer</i> | polymer | DEMO |
power settings new | <i class="material-icons">power_settings_new</i> | power_settings_new | DEMO |
pregnant woman | <i class="material-icons">pregnant_woman</i> | pregnant_woman | DEMO |
<i class="material-icons">print</i> | DEMO | ||
query builder | <i class="material-icons">query_builder</i> | query_builder | DEMO |
question answer | <i class="material-icons">question_answer</i> | question_answer | DEMO |
receipt | <i class="material-icons">receipt</i> | receipt | DEMO |
record voice over | <i class="material-icons">record_voice_over</i> | record_voice_over | DEMO |
redeem | <i class="material-icons">redeem</i> | redeem | DEMO |
remove shopping cart | <i class="material-icons">remove_shopping_cart</i> | remove_shopping_cart | DEMO |
reorder | <i class="material-icons">reorder</i> | reorder | DEMO |
report problem | <i class="material-icons">report_problem</i> | report_problem | DEMO |
restore | <i class="material-icons">restore</i> | restore | DEMO |
restore page | <i class="material-icons">restore_page</i> | restore_page | DEMO |
room | <i class="material-icons">room</i> | room | DEMO |
rounded corner | <i class="material-icons">rounded_corner</i> | rounded_corner | DEMO |
rowing | <i class="material-icons">rowing</i> | rowing | DEMO |
schedule | <i class="material-icons">schedule</i> | schedule | DEMO |
search | <i class="material-icons">search</i> | search | DEMO |
settings | <i class="material-icons">settings</i> | settings | DEMO |
settings applications | <i class="material-icons">settings_applications</i> | settings_applications | DEMO |
settings backup restore | <i class="material-icons">settings_backup_restore</i> | settings_backup_restore | DEMO |
settings bluetooth | <i class="material-icons">settings_bluetooth</i> | settings_bluetooth | DEMO |
settings brightness | <i class="material-icons">settings_brightness</i> | settings_brightness | DEMO |
settings cell | <i class="material-icons">settings_cell</i> | settings_cell | DEMO |
settings ethernet | <i class="material-icons">settings_ethernet</i> | settings_ethernet | DEMO |
settings input antenna | <i class="material-icons">settings_input_antenna</i> | settings_input_antenna | DEMO |
settings input component | <i class="material-icons">settings_input_component</i> | settings_input_component | DEMO |
settings input composite | <i class="material-icons">settings_input_composite</i> | settings_input_composite | DEMO |
settings input hdmi | <i class="material-icons">settings_input_hdmi</i> | settings_input_hdmi | DEMO |
settings input svideo | <i class="material-icons">settings_input_svideo</i> | settings_input_svideo | DEMO |
settings overscan | <i class="material-icons">settings_overscan</i> | settings_overscan | DEMO |
settings phone | <i class="material-icons">settings_phone</i> | settings_phone | DEMO |
settings power | <i class="material-icons">settings_power</i> | settings_power | DEMO |
settings remote | <i class="material-icons">settings_remote</i> | settings_remote | DEMO |
settings voice | <i class="material-icons">settings_voice</i> | settings_voice | DEMO |
shop | <i class="material-icons">shop</i> | shop | DEMO |
shop two | <i class="material-icons">shop_two</i> | shop_two | DEMO |
shopping basket | <i class="material-icons">shopping_basket</i> | shopping_basket | DEMO |
shopping cart | <i class="material-icons">shopping_cart</i> | shopping_cart | DEMO |
speaker notes | <i class="material-icons">speaker_notes</i> | speaker_notes | DEMO |
speaker notes off | <i class="material-icons">speaker_notes_off</i> | speaker_notes_off | DEMO |
spellcheck | <i class="material-icons">spellcheck</i> | spellcheck | DEMO |
star rate | <i class="material-icons">star_rate</i> | star_rate | DEMO |
stars | <i class="material-icons">stars</i> | stars | DEMO |
store | <i class="material-icons">store</i> | store | DEMO |
subject | <i class="material-icons">subject</i> | subject | DEMO |
supervisor account | <i class="material-icons">supervisor_account</i> | supervisor_account | DEMO |
swap horiz | <i class="material-icons">swap_horiz</i> | swap_horiz | DEMO |
swap vert | <i class="material-icons">swap_vert</i> | swap_vert | DEMO |
swap vertical circle | <i class="material-icons">swap_vertical_circle</i> | swap_vertical_circle | DEMO |
system update alt | <i class="material-icons">system_update_alt</i> | system_update_alt | DEMO |
tab | <i class="material-icons">tab</i> | tab | DEMO |
tab unselected | <i class="material-icons">tab_unselected</i> | tab_unselected | DEMO |
theaters | <i class="material-icons">theaters</i> | theaters | DEMO |
thumb down | <i class="material-icons">thumb_down</i> | thumb_down | DEMO |
thumb up | <i class="material-icons">thumb_up</i> | thumb_up | DEMO |
thumbs up down | <i class="material-icons">thumbs_up_down</i> | thumbs_up_down | DEMO |
timeline | <i class="material-icons">timeline</i> | timeline | DEMO |
toc | <i class="material-icons">toc</i> | toc | DEMO |
today | <i class="material-icons">today</i> | today | DEMO |
toll | <i class="material-icons">toll</i> | toll | DEMO |
touch app | <i class="material-icons">touch_app</i> | touch_app | DEMO |
track changes | <i class="material-icons">track_changes</i> | track_changes | DEMO |
translate | <i class="material-icons">translate</i> | translate | DEMO |
trending down | <i class="material-icons">trending_down</i> | trending_down | DEMO |
trending flat | <i class="material-icons">trending_flat</i> | trending_flat | DEMO |
trending up | <i class="material-icons">trending_up</i> | trending_up | DEMO |
turned in | <i class="material-icons">turned_in</i> | turned_in | DEMO |
turned in not | <i class="material-icons">turned_in_not</i> | turned_in_not | DEMO |
update | <i class="material-icons">update</i> | update | DEMO |
verified user | <i class="material-icons">verified_user</i> | verified_user | DEMO |
view agenda | <i class="material-icons">view_agenda</i> | view_agenda | DEMO |
view array | <i class="material-icons">view_array</i> | view_array | DEMO |
view carousel | <i class="material-icons">view_carousel</i> | view_carousel | DEMO |
view column | <i class="material-icons">view_column</i> | view_column | DEMO |
view day | <i class="material-icons">view_day</i> | view_day | DEMO |
view headline | <i class="material-icons">view_headline</i> | view_headline | DEMO |
view list | <i class="material-icons">view_list</i> | view_list | DEMO |
view module | <i class="material-icons">view_module</i> | view_module | DEMO |
view quilt | <i class="material-icons">view_quilt</i> | view_quilt | DEMO |
view stream | <i class="material-icons">view_stream</i> | view_stream | DEMO |
view week | <i class="material-icons">view_week</i> | view_week | DEMO |
visibility | <i class="material-icons">visibility</i> | visibility | DEMO |
visibility off | <i class="material-icons">visibility_off</i> | visibility_off | DEMO |
watch later | <i class="material-icons">watch_later</i> | watch_later | DEMO |
work | <i class="material-icons">work</i> | work | DEMO |
youtube searched for | <i class="material-icons">youtube_searched_for</i> | youtube_searched_for | DEMO |
zoom in | <i class="material-icons">zoom_in</i> | zoom_in | DEMO |
zoom out | <i class="material-icons">zoom_out</i> | zoom_out | DEMO |