title: Align navigation item with dropdown having icon in BootstrapVue
body: <p>When I place an icon into <code>b-nav-item-dropdown</code> the vertical alignment of navigation bar gets broken:</p>
  
  <p><a href="https://i.stack.imgur.com/Zl2m7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zl2m7.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/G8psx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G8psx.png" alt="tr"></a></p>
  
  <pre><code>&lt;b-navbar-nav class="ml-auto"&gt;
    &lt;b-nav-item :to="{ name: 'sign-in'}"&gt;Sign in&lt;/b-nav-item&gt;
          &lt;b-nav-item-dropdown toggle-class="text-warning" right&gt;
            &lt;template v-slot:button-content&gt;
              &lt;b-icon-info font-scale="2"&gt;&lt;/b-icon-info&gt;
            &lt;/template&gt;
            &lt;b-dropdown-item :to="{ name: 'help'}"&gt;Help&lt;/b-dropdown-item&gt;
          &lt;/b-nav-item-dropdown&gt;
  </code></pre>
  
  <p>How can I align them? Is there BootstrapVue native way? The nav components miss <code>align-v</code> attribute.</p>