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>
<div class="buttons">
<b-button
label="Finish"
type="is-dark"
icon-left="check" />
<b-button
label="Finish"
type="is-warning"
icon-left="check" />
</div>
</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>
<div class="buttons">
<b-button
label="Finish"
type="is-dark"
icon-pack="fas"
icon-left="check" />
<b-button
label="Finish"
type="is-warning"
icon-pack="fas"
icon-left="check" />
<b-button type="is-warning">
<b-icon
pack="fas"
icon="sync-alt"
custom-class="fa-spin">
</b-icon>
<span>Refresh</span>
</b-button>
</div>
</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.
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">
<p>
<a href="https://ionicons.com" target="_blank">ionicons</a>
</p>
<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>
<div class="buttons">
<b-button
label="Finish"
type="is-dark"
icon-pack="ionicons"
icon-left="checkmark" />
<b-button
label="Finish"
type="is-warning"
icon-pack="ionicons"
icon-left="checkmark" />
<b-button
label="Refresh"
type="is-warning"
icon-pack="ionicons"
icon-left="refresh" />
</div>
</div>
<div class="block">
<p>
<a href="https://iconscout.com/unicons" target="_blank">unicons</a>
</p>
<div class="block">
<b-icon
pack="uil"
icon="user"
size="is-small">
</b-icon>
<b-icon
pack="uil"
icon="home"
size="is-small">
</b-icon>
<b-icon
pack="uil"
icon="apps"
size="is-small">
</b-icon>
</div>
<div class="block">
<b-icon
pack="uil"
icon="user">
</b-icon>
<b-icon
pack="uil"
icon="home">
</b-icon>
<b-icon
pack="uil"
icon="apps">
</b-icon>
</div>
<div class="block">
<b-icon
pack="uil"
icon="user"
size="is-medium">
</b-icon>
<b-icon
pack="uil"
icon="home"
size="is-medium">
</b-icon>
<b-icon
pack="uil"
icon="apps"
size="is-medium">
</b-icon>
</div>
<div class="block">
<b-icon
pack="uil"
icon="user"
size="is-large"
type="is-success">
</b-icon>
<b-icon
pack="uil"
icon="home"
size="is-large"
type="is-info">
</b-icon>
<b-icon
pack="uil"
icon="apps"
size="is-large"
type="is-primary">
</b-icon>
</div>
<div class="buttons">
<b-button
label="Finish"
type="is-dark"
icon-pack="uil"
icon-left="check" />
<b-button
label="Finish"
type="is-warning"
icon-pack="uil"
icon-left="check" />
<b-button
label="Refresh"
type="is-warning"
icon-pack="uil"
icon-left="refresh" />
</div>
</div>
<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': '',
'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',
'close-circle': 'close-circle-outline'
}
},
'uil': {
sizes: {
'default': 'is-size-5',
'is-small': '',
'is-medium': 'is-size-3',
'is-large': 'is-size-1'
},
iconPrefix: 'uil-',
internalIcons: {
'check': 'check',
'information': 'information',
'check-circle': 'checkmark-circle',
'alert': 'exclamation',
'alert-circle': 'exclamation-circle',
'arrow-up': 'arrow-up',
'chevron-right': 'angle-right',
'chevron-left': 'angle-left',
'chevron-down': 'arrow-down',
'eye': 'eye',
'eye-off': 'eye-slash',
'menu-down': 'angle-down',
'menu-up': 'angle-up',
'close-circle': 'times-circle'
}
}
}
}
export default {
created() {
this.$buefy.config.setOptions(customIconConfig)
}
}
</script>
<style scoped>
@import "https://unpkg.com/[email protected]/dist/css/ionicons.min.css";
@import "https://unicons.iconscout.com/release/v2.1.11/css/unicons.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 | — | — |
# Variables
You can use these variables to customize this component.
Name | Default |
|---|---|
| Bulma variables | Link |
This page is open source. Noticed a typo or something's unclear?