Using
far or fad while having FontAwesome free tier might have missing icons.
You can also use object syntax for type props just like Vuejs class.
Icon
Icons take an important role of any application
Buefy is compatible with both Material Design Icons
, FontAwesome 4
and FontAwesome 5 but you can also add your custom icon pack.
They adapt to most elements background automatically — but you can also override their colors.
# Material Design Icons
<template>
<section>
<div class="block">
<b-icon
icon="account"
size="is-small">
</b-icon>
<b-icon
icon="home"
size="is-small">
</b-icon>
<b-icon
icon="view-dashboard"
size="is-small">
</b-icon>
</div>
<div class="block">
<b-icon icon="account"></b-icon>
<b-icon icon="home"></b-icon>
<b-icon icon="view-dashboard"></b-icon>
</div>
<div class="block">
<b-icon
icon="account"
size="is-medium">
</b-icon>
<b-icon
icon="home"
size="is-medium">
</b-icon>
<b-icon
icon="view-dashboard"
size="is-medium">
</b-icon>
</div>
<div class="block">
<b-icon
icon="account"
size="is-large"
type="is-success">
</b-icon>
<b-icon
icon="home"
size="is-large"
type="is-info">
</b-icon>
<b-icon
icon="view-dashboard"
size="is-large"
type="is-primary">
</b-icon>
</div>
<button class="button is-dark">
<b-icon icon="check"></b-icon>
<span>Finish</span>
</button>
<button class="button is-warning">
<b-icon icon="check"></b-icon>
<span>Finish</span>
</button>
</section>
</template>
# FontAwesome
<template>
<section>
<div class="block">
<b-icon
pack="fas"
icon="user"
size="is-small">
</b-icon>
<b-icon
pack="fas"
icon="home"
size="is-small">
</b-icon>
<b-icon
pack="fas"
icon="tachometer-alt"
size="is-small">
</b-icon>
</div>
<div class="block">
<b-icon
pack="fas"
icon="user">
</b-icon>
<b-icon
pack="fas"
icon="home">
</b-icon>
<b-icon
pack="fas"
icon="tachometer-alt">
</b-icon>
</div>
<div class="block">
<b-icon
pack="fas"
icon="user"
size="is-medium">
</b-icon>
<b-icon
pack="fas"
icon="home"
size="is-medium">
</b-icon>
<b-icon
pack="fas"
icon="tachometer-alt"
size="is-medium">
</b-icon>
</div>
<div class="block">
<b-icon
pack="fas"
icon="user"
size="is-large"
type="is-success">
</b-icon>
<b-icon
pack="fas"
icon="home"
size="is-large"
type="is-info">
</b-icon>
<b-icon
pack="fas"
icon="tachometer-alt"
size="is-large"
type="is-primary">
</b-icon>
</div>
<button class="button is-dark">
<b-icon pack="fas" icon="check"></b-icon>
<span>Finish</span>
</button>
<button class="button is-warning">
<b-icon pack="fas" icon="check"></b-icon>
<span>Finish</span>
</button>
<button class="button is-warning">
<b-icon
pack="fas"
icon="sync-alt"
custom-class="fa-spin">
</b-icon>
<span>Refresh</span>
</button>
</section>
</template>
You can set the
defaultIconComponent constructor option to render icons with the
vue-fontawesome component.
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 Buefy from 'buefy'
Vue.use(Buefy, {
defaultIconComponent: 'vue-fontawesome',
defaultIconPack: 'fas',
});# Object syntax
<template>
<section>
<b-checkbox v-model="isGreen">Green color</b-checkbox>
<div class="block">
<b-icon :type="{ 'is-success': isGreen }" icon="account"></b-icon>
<b-icon :type="{ 'is-success': isGreen }" icon="home"></b-icon>
<b-icon :type="{ 'is-success': isGreen }" icon="view-dashboard"></b-icon>
</div>
</section>
</template>
<script>
export default {
data() {
return {
isGreen: true
}
}
}
</script>
# Custom Icon Pack
You can also add your own custom font (Ionicons is used in this example).
Can also customize some properties of the default icon packs. In this example, default sizes for FontAwesome have been modified.
<template>
<section>
<div class="block">
<b-icon
pack="ionicons"
icon="person"
size="is-small">
</b-icon>
<b-icon
pack="ionicons"
icon="home"
size="is-small">
</b-icon>
<b-icon
pack="ionicons"
icon="apps"
size="is-small">
</b-icon>
</div>
<div class="block">
<b-icon
pack="ionicons"
icon="person">
</b-icon>
<b-icon
pack="ionicons"
icon="home">
</b-icon>
<b-icon
pack="ionicons"
icon="apps">
</b-icon>
</div>
<div class="block">
<b-icon
pack="ionicons"
icon="person"
size="is-medium">
</b-icon>
<b-icon
pack="ionicons"
icon="home"
size="is-medium">
</b-icon>
<b-icon
pack="ionicons"
icon="apps"
size="is-medium">
</b-icon>
</div>
<div class="block">
<b-icon
pack="ionicons"
icon="person"
size="is-large"
type="is-success">
</b-icon>
<b-icon
pack="ionicons"
icon="home"
size="is-large"
type="is-info">
</b-icon>
<b-icon
pack="ionicons"
icon="apps"
size="is-large"
type="is-primary">
</b-icon>
</div>
<button class="button is-dark">
<b-icon pack="ionicons" icon="checkmark"></b-icon>
<span>Finish</span>
</button>
<button class="button is-warning">
<b-icon pack="ionicons" icon="checkmark"></b-icon>
<span>Finish</span>
</button>
<button class="button is-warning">
<b-icon
pack="ionicons"
icon="refresh">
</b-icon>
<span>Refresh</span>
</button>
<div class="block">
<p>
Can also customize some properties of the default icon packs. In this example, default sizes for FontAwesome have been modified.
</p>
<b-icon
pack="fas"
icon="user"
size="is-small"
type="is-success">
</b-icon>
<b-icon
pack="fas"
icon="user"
type="is-info">
</b-icon>
<b-icon
pack="fas"
icon="user"
size="is-medium"
type="is-danger">
</b-icon>
<b-icon
pack="fas"
icon="user"
size="is-large"
type="is-primary">
</b-icon>
</div>
</section>
</template>
<script>
const customIconConfig = {
customIconPacks: {
'fas': {
sizes: {
'default': null,
'is-small': 'fa-xs',
'is-medium': 'fa-lg',
'is-large': 'fa-2x'
}
},
'ionicons': {
sizes: {
'default': 'is-size-5',
'is-small': '',
'is-medium': 'is-size-3',
'is-large': 'is-size-1'
},
iconPrefix: 'ion-md-',
internalIcons: {
'check': 'checkmark',
'information': 'information',
'check-circle': 'checkmark-circle-outline',
'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',
'menu-down': 'arrow-dropdown',
'menu-up': 'arrow-dropup'
}
}
}
}
export default {
created() {
this.$buefy.config.setOptions(customIconConfig)
}
}
</script>
<style scoped>
@import "https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css";
</style>
# API
Name | Description | Type | Values | Default |
|---|---|---|---|---|
type | Type (color) of the icon, optional | String, Object | is-white, is-black, is-light,
is-dark, is-primary, is-info, is-success,
is-warning, is-danger,
and any other colors you've set in the $colors list on Sass | — |
pack | Icon pack to use | String | mdi, fa, fas, far, fad, fal | mdi |
icon | Icon name | String | — | — |
size | Icon size, optional | String | is-small, is-medium, is-large | — |
custom-size | 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 | Depends on size prop |
custom-class | Add class to icon font (<i> tag), optional.
See here for MDI,
here for FontAwesome 4 and
here for FontAwesome 5 custom classes | String | — | — |
This page is open source. Noticed a typo or something's unclear?