在 Vuetify 中的两个图标之间留出空间答案

【问题标题】：make space between two Icons in Vuetify在 Vuetify 中的两个图标之间留出空间
【发布时间】：2021-10-19 19:25:50
【问题描述】：

我有两个图标，如何在它们之间留一个空格？

App.vue 中的两个图标：

<v-btn icon class="grey lighten-4">
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
      
      <v-btn icon class="grey lighten-4">
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>

【问题讨论】：

请提供实际外观和预期外观
我编辑帖子。请看一下

标签： vue.js vuetify.js

【解决方案1】：

建议使用像mx-2这样的内置类名，在用div包裹按钮后在按钮周围添加一些边距：

<div >
     <v-btn icon class="grey lighten-4 mx-2">
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
      
      <v-btn icon class="grey lighten-4 mx-2">
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
</div>

LIVE DEMO

【讨论】：

【解决方案2】：

根据 vuetify v-icon api。我们需要使用 left 或 right 。 left：当按钮放置在另一个元素或文本的左侧时，对按钮内的图标应用适当的边距。

right：当按钮放置在另一个元素或文本的右侧时，对按钮内的图标应用适当的边距

【讨论】：