Icon

Icons take an important role of any application

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

Base

Show code

<template>
  <section>
    <div class="odocs-spaced">
      <o-icon pack="fas" icon="user" size="small"> </o-icon>
      <o-icon pack="fas" icon="home" size="small"> </o-icon>
      <o-icon pack="fas" icon="tachometer-alt" size="small"> </o-icon>
    </div>

    <div class="odocs-spaced">
      <o-icon pack="fas" icon="user"> </o-icon>
      <o-icon pack="fas" icon="home"> </o-icon>
      <o-icon pack="fas" icon="tachometer-alt"> </o-icon>
    </div>

    <div class="odocs-spaced">
      <o-icon pack="fas" icon="user" size="medium"> </o-icon>
      <o-icon pack="fas" icon="home" size="medium"> </o-icon>
      <o-icon pack="fas" icon="tachometer-alt" size="medium"> </o-icon>
    </div>

    <div class="odocs-spaced">
      <o-icon pack="fas" icon="user" size="large" variant="success"> </o-icon>
      <o-icon pack="fas" icon="home" size="large" variant="info"> </o-icon>
      <o-icon pack="fas" icon="tachometer-alt" size="large" variant="primary">
      </o-icon>
    </div>

    <div class="odocs-spaced">
        <o-button variant="success">
            <o-icon pack="fas" icon="check"></o-icon>
            <span>Finish</span>
        </o-button>

        <o-button variant="warning">
            <o-icon pack="fas" icon="check"></o-icon>
            <span>Finish</span>
        </o-button>

        <o-button variant="warning">
            <o-icon pack="fas" icon="sync-alt" spin> </o-icon>
            <span>Refresh</span>
        </o-button>
    </div>

  </section>
</template>

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

<template>
  <section>
    <div class="odocs-spaced">
      <o-icon pack="ionicons" icon="person" size="small"> </o-icon>
      <o-icon pack="ionicons" icon="home" size="small"> </o-icon>
      <o-icon pack="ionicons" icon="apps" size="small"> </o-icon>
    </div>

    <div class="odocs-spaced">
      <o-icon pack="ionicons" icon="person"> </o-icon>
      <o-icon pack="ionicons" icon="home"> </o-icon>
      <o-icon pack="ionicons" icon="apps"> </o-icon>
    </div>

    <div class="odocs-spaced">
      <o-icon pack="ionicons" icon="person" size="medium"> </o-icon>
      <o-icon pack="ionicons" icon="home" size="medium"> </o-icon>
      <o-icon pack="ionicons" icon="apps" size="medium"> </o-icon>
    </div>

    <div class="odocs-spaced">
      <o-icon pack="ionicons" icon="person" size="large" variant="success">
      </o-icon>
      <o-icon pack="ionicons" icon="home" size="large" variant="info"> </o-icon>
      <o-icon pack="ionicons" icon="apps" size="large" variant="primary">
      </o-icon>
    </div>

    <div class="odocs-spaced">
        <o-button variant="primary">
            <o-icon pack="ionicons" icon="checkmark"></o-icon>
            <span>Finish</span>
        </o-button>

        <o-button variant="warning">
            <o-icon pack="ionicons" icon="checkmark"></o-icon>
            <span>Finish</span>
        </o-button>

        <o-button variant="warning">
            <o-icon spin pack="ionicons" icon="refresh"> </o-icon>
            <span>Refresh</span>
        </o-button>
    </div>

  </section>
</template>

<script lang="ts">
import { defineComponent, ref, onBeforeMount, onBeforeUnmount } from 'vue'
import { useProgrammatic } from '@oruga-ui/oruga-next'

const customIconConfig = {
  iconComponent: undefined,
  customIconPacks: {
    ionicons: {
      sizes: {
        default: 'is-size-5',
        small: '',
        medium: 'is-size-3',
        large: 'is-size-1',
      },
      iconPrefix: 'ion-md-',
      internalIcons: {
        check: 'checkmark',
        information: 'information',
        alert: 'alert',
        'alert-circle': 'alert',
        'arrow-up': 'arrow-up',
        'chevron-right': 'arrow-forward',
        'chevron-left': 'arrow-back',
        'chevron-down': 'arrow-down',
        eye: 'eye',
        'eye-off': 'eye-off',
        'caret-down': 'arrow-dropdown',
        'caret-up': 'arrow-dropup',
        loading: 'reload-outline',
        times: 'close-outline',
        'close-circle': 'close-circle-outline',
      }
    }
  }
}

export default defineComponent({
  setup() {

    // all code is only for example purpose

    const docsIcon = ref(undefined)

    const { oruga } = useProgrammatic()

    onBeforeMount(() => {
        docsIcon.value = oruga.config.getOptions().iconComponent
        oruga.config.setOptions(customIconConfig)
    })

    onBeforeUnmount(() => {
        oruga.config.setOptions({
            iconComponent: docsIcon.value,
        })
    })
  }

})
</script>

<style>
@import 'https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css';
</style>

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

How does Class props inspector work?

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 medium large`
spinClass	Class of the element when spin.	`spin`
variantClass	Class of the icon variant.	`variant`	`primary info warning danger`

Props

Prop name	Description	Type	Values
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

📄 Full scss file

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

Icon #

Base

Custom icon pack

Override icon pack

Custom icon component

Class props #

Class prop

Description

Props

Suffixes

Props #

Style #

Icon

Class props

Props

Style