Vue.js 如何在按钮文本上方移动图标？

我是新来的。 你能告诉我如何在文本上方移动图标吗

<v-toolbar-items>
      <v-btn text title>
        <v-icon>mdi-magnify</v-icon>
        Test
      </v-btn>
      </v-toolbar-items>

mdi放大
试验

这是一个，但我发现实现这一点的唯一方法是使用CSS覆盖：

.v-btn__content {
    display:flex;
    flex-direction:column;
}

<v-btn icon>
    <v-icon>mdi-heart</v-icon>
    <div>Text</div>
</v-btn>

.v-btn\u内容{
显示器：flex；
弯曲方向：立柱；
}
心脏
正文

---

演示：

是的，它可以工作，只能应用于某些按钮吗？我成功了，我向必要的按钮class=“up\u icon”添加了一个类。然后我使用css:.up\u icon>span{display:flex；flex direction:column；}