title: How to include bootstrap-vue icons into nuxtjs? Problem with navbar down arrows
body: <p>Edit: hmm there might be a styling override - <br>
  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..<br></p>
  
  <p>EDIT: FML - it was another nav bar styles overriding, USE SCOPE LOL</p>
  
  <p>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..</p>
  
  <pre><code>&lt;b-navbar toggleable="lg" type="dark" &gt;
      &lt;b-navbar-brand href="#"&gt;&lt;img src="" class="d-inline-block align-top" width="220" height="45"&gt;&lt;/b-navbar-brand&gt;
  
      &lt;b-navbar-toggle target="nav-collapse"&gt;&lt;/b-navbar-toggle&gt;
      &lt;b-collapse id="nav-collapse" is-nav&gt;
        &lt;b-navbar-nav&gt;
          &lt;b-nav-item href="#"&gt;&lt;/b-nav-item&gt;
          &lt;b-nav-item href="#"&gt;Home&lt;/b-nav-item&gt;
          &lt;b-nav-item href="#"&gt;Contact Us&lt;/b-nav-item&gt;
          &lt;b-nav-item href="#"&gt;FAQ&lt;/b-nav-item&gt;
        &lt;/b-navbar-nav&gt;
  
        &lt;!-- Right aligned nav items --&gt;
        &lt;b-navbar-nav class="ml-auto"&gt;
          &lt;b-nav-item-dropdown  text="Lang" right&gt;
            &lt;b-dropdown-item href="#"&gt;EN&lt;/b-dropdown-item&gt;
            &lt;b-dropdown-item href="#"&gt;ES&lt;/b-dropdown-item&gt;
          &lt;/b-nav-item-dropdown&gt;
  
          &lt;b-nav-item-dropdown right&gt;
            &lt;!-- Using 'button-content' slot --&gt;
            &lt;template v-slot:button-content&gt;
              &lt;em&gt;Welcome, Friend&lt;/em&gt;
            &lt;/template&gt;
            &lt;b-dropdown-item href="#"&gt;Profile&lt;/b-dropdown-item&gt;
            &lt;b-dropdown-item href="#"&gt;Sign Out&lt;/b-dropdown-item&gt;
          &lt;/b-nav-item-dropdown&gt;
        &lt;/b-navbar-nav&gt;
      &lt;/b-collapse&gt;
    &lt;/b-navbar&gt;
  </code></pre>
  
  <p>Some icons work others don't.No errors are being throw.<br></p>
  
  <p>The documentation says they are not installed by default...so I installed them with<br>
  <a href="https://icons.getbootstrap.com/#install" rel="noreferrer">https://icons.getbootstrap.com/#install</a><br>
  <a href="https://bootstrap-vue.js.org/docs/icons/" rel="noreferrer">https://bootstrap-vue.js.org/docs/icons/</a></p>
  
  <p><code>npm i bootstrap-icons</code>  </p>
  
  <p>I created a plugin thats included nuxt.config.js. <br>The elements all seem to be working correctly but the icons..</p>
  
  <pre><code> plugins: [
    '@/plugins/bootstrap-vue.js'
    ,'@/plugins/mixins/user.js'
  ],
  </code></pre>
  
  <p>/plugins/bootstrap.vue.js below </p>
  
  <pre><code>import Vue from 'vue'
  import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'
  Vue.use(BootstrapVue)
  Vue.use(BootstrapVueIcons)
  </code></pre>
  
  <p>I also tried to include them specifically </p>
  
  <pre><code>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)
  </code></pre>
  
  <p>1) I DON'T see any related to icons in the node_modules/bootstrap folder.
  <br>2) I DO see bootstrap.vue-icon.* in the node_modules/bootstrap-vue folder. It contains like -icons.common.js, -icons.css.<br></p>
  
  <p><br>
  I ALso tried to add icons directly to the element like..</p>
  
  <pre><code>&lt;b-nav-item-dropdown icon="circle-fill" text="Lang" right&gt;
  </code></pre>
  
  <p>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..</p>
  
  <p><a href="https://i.stack.imgur.com/1EJhS.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1EJhS.png" alt="Icons working"></a></p>
  
  <p>Here i added some of the other <code>&lt;b&gt;</code> components to my project to see if icons, arrows were working.And they do..
  <br>
  <a href="https://i.stack.imgur.com/OuHoy.png" rel="noreferrer"><img src="https://i.stack.imgur.com/OuHoy.png" alt="enter image description here"></a><br>
  <a href="https://i.stack.imgur.com/a8o7V.png" rel="noreferrer"><img src="https://i.stack.imgur.com/a8o7V.png" alt="enter image description here"></a>
  <br>
  <br>
  But for  b-navbar-dropdown.... They don't work!
  <br>
  <br>
  <a href="https://i.stack.imgur.com/Pq4DP.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Pq4DP.png" alt="enter image description here"></a></p>
  
  <p><br> Suggestions?</p>