# Icon

Icons take an important role of any application


edit on github

# Examples

Oruga is compatible with both Material Design Icons and FontAwesome 5 but you can also add your custom icon pack.

# Base

# Custon icon pack

# Override icon pack

Can also customize some properties of the default icon packs. In this example, default sizes for FontAwesome have been modified.

const customIconConfig = {
  customIconPacks: {
    fas: {
      sizes: {
        default: null,
        small: null,
        medium: 'fa-lg',
        large: 'fa-2x'
      }
    }
  }
}
export default {
  created() {
    this.$oruga.config.setOptions(customIconConfig)
  }
}

# Custom icon component

TIP

You can set the iconComponent config option to render icons with the vue-fontawesome component (it should works with other Vue icon components).

import { library } from '@fortawesome/fontawesome-svg-core'
// internal icons
import {
  faCheck,
  faCheckCircle,
  faInfoCircle,
  faExclamationTriangle,
  faExclamationCircle,
  faArrowUp,
  faAngleRight,
  faAngleLeft,
  faAngleDown,
  faEye,
  faEyeSlash,
  faCaretDown,
  faCaretUp,
  faUpload
} from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(
  faCheck,
  faCheckCircle,
  faInfoCircle,
  faExclamationTriangle,
  faExclamationCircle,
  faArrowUp,
  faAngleRight,
  faAngleLeft,
  faAngleDown,
  faEye,
  faEyeSlash,
  faCaretDown,
  faCaretUp,
  faUpload
)
Vue.component('vue-fontawesome', FontAwesomeIcon)

// ...

import Oruga from '@oruga-ui/oruga'
Vue.use(Oruga, {
  iconComponent: 'vue-fontawesome',
  iconPack: 'fas'
})

# Props

Prop name Description Type Values Default
variant Color of the icon, optional string|object primary, info, success, warning, danger, and any other custom color
component string -
pack Icon pack to use string mdi, fa, fas and any other custom icon pack
icon Icon name string -
size Icon size, optional string small, medium, large
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
customClass Add class to icon font, optional. See here for MDI, here for FontAwesome 4 and here for FontAwesome 5 custom classes string -
clickable When true makes icon clickable boolean -
spin Enable spin effect on icon boolean -
both boolean -
rootClass string -
clickableClass string -
spinClass string -
sizeClass string -
variantClass string -

# Style

CSS Variable SASS Variable Default
--oruga-icon-spin-duration $icon-spin-duration 2s