Icon

Icons take an important role of any application

Examples

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

Base

Show code

HTML

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

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

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

    <div class="odocs-spaced">
        <o-icon pack="fas" icon="user" size="large" variant="success" />

        <o-icon pack="fas" icon="home" size="large" variant="info" />

        <o-icon
            pack="fas"
            icon="tachometer-alt"
            size="large"
            variant="primary" />
    </div>

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

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

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

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

HTML

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

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

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

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

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

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

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

JS

import { ref, onBeforeMount, onBeforeUnmount } from "vue";
import { useOruga } from "@oruga-ui/oruga-next";

const 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",
        },
    },
};

// all code is only for example purpose

const orugaOptions = ref();

const oruga = useOruga();

onBeforeMount(() => {
    // save old settings
    orugaOptions.value = oruga.config.getOptions();
    // override custom settings
    oruga.config.setOption("iconComponent", undefined);
    oruga.config.setOption("customIconPacks", customIconPacks);
});

onBeforeUnmount(() => {
    // restore old settings
    oruga.config.setOptions(orugaOptions.value);
});

SCSS

@import "https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css";

Override icon pack

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

Hide code

JS

const customIconConfig = {
    customIconPacks: {
        fas: {
            sizes: {
                default: null,
                small: null,
                medium: "fa-lg",
                large: "fa-xl"
            }
        }
    }
}

import Oruga from "@oruga-ui/oruga";
app.use(Oruga, {
    iconComponent: "vue-fontawesome",
    iconPack: "fas",
    ...customIconConfig
}); ```

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).

Hide code

JS

import { library } from "@fortawesome/fontawesome-svg-core";
// internal icons
import {
    faCheck,
    faCheckCircle,
    faInfoCircle,
    faExclamationTriangle,
    faExclamationCircle,
    faArrowUp,
    faAngleRight,
    faAngleLeft,
    faAngleDown,
    faEye,
    faEyeSlash,
    faCaretDown,
    faCaretUp
} 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
);
app.component("vue-fontawesome", FontAwesomeIcon);

// ...

import Oruga from "@oruga-ui/oruga";
app.use(Oruga, {
    iconComponent: "vue-fontawesome",
    iconPack: "fas"
}); ```

Class props

'Classes applied to the element'

Icon component

Icons take an important role of any application

<o-icon></o-icon>

Props

Prop name	Description	Type	Values	Default
clickable	When true makes icon clickable	boolean	-	false
component	Icon component name	string	-	From config: {   iconComponent: undefined }
customSize	Overrides icon font size	string	Depends on library: null (smallest), fa-sm, fa-lg, fa-xl, mdi-18px, mdi-24px, mdi-36px, mdi-48px
icon	Icon name	string	-
override	Override existing theme classes completely	boolean	-
pack	Icon pack to use	string	mdi, fa, fas and any other custom icon pack	From config: {   iconPack: "mdi" }
rotation	Rotation 0-360	string | number	-
size	Icon size	string	small, medium, large	From config: icon: {   size: undefined }
spin	Enable spin effect on icon	boolean	-	false
variant	Color of the icon	string	primary, info, success, warning, danger, and any other custom color	From config: icon: {   variant: undefined }

Sass variables

Current theme ➜ Oruga

SASS Variable	Default
$icon-spin-duration	2s

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS Variable	Default
$icon-spin-duration	2s

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

SASS Variable	Default
$icon-spin-animation-duration	1.5s

See ➜ 📄 Full scss file