As a general rule, the hazdev-template has chosen to incorporate the material icon font pack when icons are required. A complete implementation guide can be used as a reference for optimal usage and styling. Below are instructions for incorporating the fonts into projects already using the hazdev-template as well as a few examples.
Usage
Place icons on the page using the material-icons class on an
element with content indicating the name of the icon to display.
<i class="material-icons">face</i>While all browsers supported by the hazdev-template have support for font ligatures, for maximum compatibility, you may want to use the numeric character index instead of the character name, like so:
<i class="material-icons"></i>Result: face
More Examples
Below are selected examples chosen for consistency across pages/applications within the template. The full set of icons are available if desired. Icons are listed alphabetically by name left-to-right, top-to-bottom.
- add
- add_circle
- add_circle_outline
- arrow_back
- arrow_forward
- block
- cancel
- check
- check_circle
- chevron_left
- chevron_right
- close
- delete
- edit
- error
- error_outline
- explore
- fast_forward
- fast_rewind
- file_download
- file_upload
- flag
- fullscreen
- fullscreen_exit
- gps_fixed
- help
- help_outline
- highlight_off
- history
- home
- info
- info_outline
- layers
- list
- map
- my_location
- notifications
- notifications_none
- pause
- place
- play_arrow
- public
- refresh
- remove
- remove_circle
- remove_circle_outline
- save
- schedule
- search
- settings
- share
- skip_next
- skip_previous
- smartphone
- star
- star_border
- stop
- today
- warning
- zoom_in
- zoom_out