Here we will learn navigation icons in google material design with examples and different type of navigation icons (apps, arrows upward, chevron left / right, close, cancel, refresh, menu, arrow back, etc.) in google material design with examples.
Google material design is having different type of navigation icons available those are full screen full screen exit, menu, last page, first page, refresh, subdirectory arrow left / right, etc.
| Name | Usage Description | Icon | Example |
|---|---|---|---|
| apps | <i class="material-icons">apps</i> | apps | DEMO |
| arrow back | <i class="material-icons">arrow_back</i> | arrow_back | DEMO |
| arrow downward | <i class="material-icons">arrow_downward</i> | arrow_downward | DEMO |
| arrow drop down | <i class="material-icons">arrow_drop_down</i> | arrow_drop_down | DEMO |
| arrow drop down circle | <i class="material-icons">arrow_drop_down_circle</i> | arrow_drop_down_circle | DEMO |
| arrow drop up | <i class="material-icons">arrow_drop_up</i> | arrow_drop_up | DEMO |
| arrow forward | <i class="material-icons">arrow_forward</i> | arrow_forward | DEMO |
| arrow upward | <i class="material-icons">arrow_upward</i> | arrow_upward | DEMO |
| cancel | <i class="material-icons">cancel</i> | cancel | DEMO |
| check | <i class="material-icons">check</i> | check | DEMO |
| chevron left | <i class="material-icons">chevron_left</i> | chevron_left | DEMO |
| chevron right | <i class="material-icons">chevron_right</i> | chevron_right | DEMO |
| close | <i class="material-icons">close</i> | close | DEMO |
| expand less | <i class="material-icons">expand_less</i> | expand_less | DEMO |
| expand more | <i class="material-icons">expand_more</i> | expand_more | DEMO |
| first page | <i class="material-icons">first_page</i> | first_page | DEMO |
| fullscreen | <i class="material-icons">fullscreen</i> | fullscreen | DEMO |
| fullscreen exit | <i class="material-icons">fullscreen_exit</i> | fullscreen_exit | DEMO |
| last page | <i class="material-icons">last_page</i> | last_page | DEMO |
| menu | <i class="material-icons">menu</i> | menu | DEMO |
| more horiz | <i class="material-icons">more_horiz</i> | more_horiz | DEMO |
| more vert | <i class="material-icons">more_vert</i> | more_vert | DEMO |
| refresh | <i class="material-icons">refresh</i> | refresh | DEMO |
| subdirectory arrow left | <i class="material-icons">subdirectory_arrow_left</i> | subdirectory_arrow_left | DEMO |
| subdirectory arrow right | <i class="material-icons">subdirectory_arrow_right</i> | subdirectory_arrow_right | DEMO |