Icons
7We only use Material icons. To use an icon, use the i-tag and apply the classes "mdi" and "mdi-icon-name" (replacing icon-name with the name form the icon index).
Icons can for example be used as buttons or prepend inputs.
In the cases where icons appear in the defined markup throughout this styleguide, they might have special style rules applied to them so be sure that the functionality is intact if you opt to remove them.
-
Quick symbol library
7.1These icons are used in the project and have a definition of when they should be used.
| Icon | Class name | Definition |
|---|---|---|
| mdi mdi-menu | Trigger a major menu | |
| mdi mdi-dots-vertical | Trigger a minor menu | |
| mdi mdi-menu-down | Indicates a dropdown menu | |
| mdi mdi-chevron-left | Indicate expandable row | |
| mdi mdi-chevron-right | Indicate expandable row | |
| mdi mdi-alert | Used for warnings | |
| mdi mdi-thumb-up | Used for positive feedback | |
| mdi mdi-alert-circle | Used for general notifications | |
| mdi mdi-alert-octagon | Used for errors | |
| mdi mdi-plus | Add new item | |
| mdi mdi-content-copy | Duplicate the item | |
| mdi mdi-pencil | Edit the item | |
| mdi mdi-delete | Delete the item | |
| mdi mdi-magnify | Indicate a search | |
| mdi mdi-filter-outline | Indicate a filter | |
| mdi mdi-eye-off | Hide | |
| mdi mdi-eye-off | Show | |
| mdi mdi-account | User and account related actions |
| Icon | Class name | Definition |
|---|---|---|
| mdi mdi-arrow-right | Go, run, proceed | |
| mdi mdi-sort-ascending | Ascending sorting | |
| mdi mdi-sort-descending | Descending sorting | |
| mdi mdi-arrow-up | Currently sorting ascending | |
| mdi mdi-arrow-down | Currently sorting descending | |
| mdi mdi-skip-previous | Go to first | |
| mdi mdi-skip-next | Go to last | |
| mdi mdi-arrow-left-bold-box | Open sidebar in panel | |
| mdi mdi-arrow-right-bold-box | Close sidebar in panel | |
| mdi mdi-close | Close or remove the item | |
| mdi mdi-check | Selected | |
| mdi mdi-chart-bar | Show a bar chart | |
| mdi mdi-chart-line | Show a line chart | |
| mdi mdi-help-circle | Indicate help tools | |
| mdi mdi-block-helper | Clear selections | |
| mdi mdi-school | Training | |
| mdi mdi-settings | User defined settings | |
| mdi mdi-information-outline | Show more information about this view/panel |
-
Huge icon
7.2Huge icons are used on big empty areas to grab user attention and in combination with some text initiate a module.
-
Show
Hide
markup
<i class="mdi mdi-information-outline huge-icon line-center"></i>