title: Bootstrap-vue Collapse: show state with arrow
body: <p>I'm using Bootstrap-vue, and have a simple collapse component such that I can toggle the visibility of the content. I'm looking for a way to include an arrow icon in the toggle button that indicates the collapse state: arrow pointing down if content is opened, arrow pointing sideways if closed. </p>
  
  <p>I have looked at the solution here <a href="https://stackoverflow.com/questions/38970267/bootstrap-4-collapse-show-state-with-font-awesome-icon">Bootstrap 4 Collapse show state with Font Awesome icon</a>. However, while this works for Bootstrap 4, I can't make it work with Bootstrap-vue because the markup elements are different. So, given my markup below, how can I achieve the collapse state arrow?</p>
  
  <pre><code>&lt;div&gt;
    &lt;b-btn v-b-toggle.collapse3 class="m-1"&gt;Toggle Collapse&lt;/b-btn&gt;
    &lt;b-collapse visible id="collapse3"&gt;
       &lt;b-card&gt; some content &lt;/b-card&gt;
    &lt;/b-collapse&gt;
  &lt;/div&gt;
  </code></pre>