Here we will learn navigation icons in google material design with examples and different 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 types of navigation icons available which 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 |