How to toggle material design icons in Vue JS with a conditional statement?

Question

I am toggling the text inside a button, but I want to toggle icons instead. this is the code I have.

<b-button size="sm" @click="row.toggleDetails" class="mr-2">
  {{ row.detailsShowing ? '-' : '+'}} Details
</b-button>

I want to use the icons as the trigger for the toggle. Click on the chevron down to expand and the chevron up to collapse.

<i class="mdi mdi-chevron-down"></i>
<i class="mdi mdi-chevron-up"></i>

How do I change that? Everything I am trying is breaking. Thanks

Answer 1

<b-button size="sm" @click="row.toggleDetails" class="mr-2">
  <b-icon :icon="row.detailsShowing ? chevron-up : chevron-down"></b-icon> 
  Details
</b-button>