b-icon helper component not working in NuxtJS

[lagset]

Describe the bug

In nuxtJS version 2.12.2 the b-icon helper (<b-icon icon='name'></b-icon>) component will not render an icon, while b-icon component (<b-icon-name></b-icon-name>) does render an icon.

Steps to reproduce the bug

1. Create a nuxt app using $ npx create-nuxt-app <project-name>
2. Go through the setup process, always choose default, except for UI framework: Here choose Boostrap-Vue
3. Open /pages/index.vue
4. Remove default tempate and paste:

<template>
  <div class="container">
    <div>
      <p>BIcon Component:</p>
      <b-icon-arrow-up></b-icon-arrow-up>
       <p>BIcon Helper:</p>
      <b-icon icon="arrow-up"></b-icon>
    </div>
  </div>
</template>

<script>
import {BIconArrowUp} from 'bootstrap-vue'

export default {
  components: {
    BIconArrowUp
  }
}
</script>

4. Start dev server with npm run dev and visit the displayed server (e.g. localhost:3000) and see that only the Icon under BIcon Component: will be rendered on the page:

Expected behavior

Both icons will be rendered.

Versions

Libraries:

• BootstrapVue: 2.13.0
• Bootstrap: 4.4.1
• Vue: 2.6.11
• Nuxt: 2.12.2

Environment:

• Device: ASUS UX331UN
• OS: Windows 10 1909
• Browser: Firefox, Chrome
• Version: 75.0, 81.0.4044.129

[Hiws]

https://bootstrap-vue.org/docs#icons

The icons plugin is not automatically installed when using the Nuxt.js module. You must either explicitly enable the IconsPlugin, or specify which icon components you wish to import.

Looks like you might have to configure the default settings to include icons.

[tmorehouse]

Try this:

<script>
import { BIcon, BIconArrowUp } from 'bootstrap-vue'

export default {
  components: {
    BIcon,
    BIconArrowUp
  }
}
</script>

As BIcon is not part of the main BootstrapVue plugin.

[lagset]

Thanks for the quick response. Importing BIcon did the trick.