如何使用条件语句在Vue JS中切换材质设计图标？

如何解决如何使用条件语句在Vue JS中切换材质设计图标？

我在按钮内切换文本，但我想切换图标。 这是我的代码。

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

我想使用图标作为切换的触发器。 在人字形上单击向下以展开，在人字形上单击以折叠。

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

我该如何更改？我正在尝试的一切都崩溃了。 谢谢

解决方法

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