How to include bootstrap-vue icons into nuxtjs? Problem with navbar down arrows

Question

Edit: hmm there might be a styling override -
I can take the dropdown from below thats working. And stick it into the nav area and the down arrow disappears. Same can be said for the "lang" drop down, if i move it to the body, the arrow shows up..

EDIT: FML - it was another nav bar styles overriding, USE SCOPE LOL

Navbar svg downarrows won't show up. Most other icons are working just fine..The code below is pretty much copy and pasted for bootstrap vue exampe..

<b-navbar toggleable="lg" type="dark" >
    <b-navbar-brand href="#"><img src="" class="d-inline-block align-top" width="220" height="45"></b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item href="#"></b-nav-item>
        <b-nav-item href="#">Home</b-nav-item>
        <b-nav-item href="#">Contact Us</b-nav-item>
        <b-nav-item href="#">FAQ</b-nav-item>
      </b-navbar-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-item-dropdown  text="Lang" right>
          <b-dropdown-item href="#">EN</b-dropdown-item>
          <b-dropdown-item href="#">ES</b-dropdown-item>
        </b-nav-item-dropdown>

        <b-nav-item-dropdown right>
          <!-- Using 'button-content' slot -->
          <template v-slot:button-content>
            <em>Welcome, Friend</em>
          </template>
          <b-dropdown-item href="#">Profile</b-dropdown-item>
          <b-dropdown-item href="#">Sign Out</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>

Some icons work others don't.No errors are being throw.

The documentation says they are not installed by default...so I installed them with
https://icons.getbootstrap.com/#install
https://bootstrap-vue.js.org/docs/icons/

npm i bootstrap-icons

I created a plugin thats included nuxt.config.js.
The elements all seem to be working correctly but the icons..

 plugins: [
  '@/plugins/bootstrap-vue.js'
  ,'@/plugins/mixins/user.js'
],

/plugins/bootstrap.vue.js below

import Vue from 'vue'
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)

I also tried to include them specifically

import {BootstrapVue,BIconArrowUp, BIconArrowDown } from 'bootstrap-vue'
Vue.use(BootstrapVue)
import { BootstrapVueIcons } from 'bootstrap-vue'
Vue.use(BootstrapVueIcons)[![enter image description here][1]][1]
Vue.component('BIconArrowUp', BIconArrowUp)
Vue.component('BIconArrowDown', BIconArrowDown)

1) I DON'T see any related to icons in the node_modules/bootstrap folder.
2) I DO see bootstrap.vue-icon.* in the node_modules/bootstrap-vue folder. It contains like -icons.common.js, -icons.css.

I ALso tried to add icons directly to the element like..

<b-nav-item-dropdown icon="circle-fill" text="Lang" right>

Here's a snip from bootstrap-vue site with the down arrow icons showing correctly. The very bottom photo is a snip of my project with the arrows missing..

Here i added some of the other <b> components to my project to see if icons, arrows were working.And they do..



But for b-navbar-dropdown.... They don't work!

Suggestions?

Answer 1

According to the official docs, BootstrapVue does not install the icons plugin by default.

To enable this in Nuxt, edit your nuxt.config.js, find the 'bootstrap-vue/nuxt' module in the modules array and change it from this:

modules: [
  'bootstrap-vue/nuxt',

  // ...other modules
]

to this, with inline configs:

modules: [
  'bootstrap-vue/nuxt', {
    icons: true
  }
]

or this if you want separate module configs:

modules: [
  'bootstrap-vue/nuxt'
],

bootstrapVue: {
  icons: true
}

Answer 2

Soviut is mostly correct but the inline config option will not work but will throw a Nuxt Fatal Error. It only expects strings in the modules array. This solution does work however which is just creating an object for bootstrapVue specifying icons: true:

modules: [
  'bootstrap-vue/nuxt'
],

bootstrapVue: {
  icons: true
}