Icons

Using external icon libraries with use-bootstrap.

On this page
Brouse Iconfy icon sets
Nuxt Icon Docs

Basic examples

vue
<template>
  <BIcon
    icon="bi:bootstrap"
    margin="2"
  />
  <BIcon
    icon="bi:alarm"
    margin="2"
  />
  <BIcon
    icon="bi:toggles"
    margin="2"
  />
  <BIcon 
    icon="bi:shop"
    margin="2"
  />
</template>

Another examples

vue
<template>
  <b-button button="dark">
    <BIcon icon="bi:github" />
  </b-button>
  <b-button button="secondary">
    sample
    <BIcon icon="bi:1-circle-fill" />
  </b-button>
  <BInputGroup margin="t-3">
    <BInputGroupText id="basic-addon1">
      <BIcon icon="bi:person-fill" />
    </BInputGroupText>
    <BFormInput
      type="text"
      placeholder="Username"
      aria-label="Username"
      aria-describedby="basic-addon1"
    />
  </BInputGroup>
</template>