Icon
Icons take an important role of any application
Base
Show code
Custom icon pack
You can also add it during Oruga import as default config.
TIP
Take a look at below example code (click on "Show code") to know all internal icons to replace with the releated icons of your custom icon pack
Show code
Override icon pack
You can also customize some properties of the default icon packs. In this example, default sizes for FontAwesome have been modified.
Custom icon component
TIP
You can set the `iconComponent` config option to render icons with the vue-fontawesome component (it should work with other Vue icon components as well).
Class props
Class prop | Description | Props | Suffixes | |
---|---|---|---|---|
clickableClass | Class of the icon when clickable. | clickable | ||
rootClass | Class of the root element. | |||
sizeClass | Class of the icon size. | size | small | |
spinClass | Class of the element when spin. | spin | ||
variantClass | Class of the icon variant. | variant | primary |
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
both | boolean | - | ||
clickable | When true makes icon clickable | boolean | - | |
component | Icon component name | string | - | |
customClass | Add class to icon font, optional. See here for MDI, here for FontAwesome 4 and here for FontAwesome 5 custom classes | string | - | |
customSize | Overrides icon font size, optional | string | Depends on library: null (smallest) , fa-lg , fa-2x , fa-3x , fa-4x , fa-5x , mdi-18px , mdi-24px , mdi-36px , mdi-48px | |
icon | Icon name | string | - | |
override | boolean | - | ||
pack | Icon pack to use | string | mdi , fa , fas and any other custom icon pack | |
rotation | Rotation 0-360 | number|string | - | |
size | Icon size, optional | string | small , medium , large | |
spin | Enable spin effect on icon | boolean | - | |
variant | Color of the icon, optional | string|object | primary , info , success , warning , danger , and any other custom color |
Style
CSS Variable | SASS Variable | Default |
---|---|---|
--oruga-icon-spin-duration | $icon-spin-duration | 2s |