Vuetify v-icon 偏离中心答案

【问题标题】：Vuetify v-icons are off-centredVuetify v-icon 偏离中心
【发布时间】：2021-11-02 00:46:27
【问题描述】：

我正在使用带有 Material Design 的 Vuetify 的 v-icons。我希望图标居中，但我不知道该怎么做。例如：

<div style="margin:auto;">
  <v-icon dark x-large color="#90be6d">mdi-check</v-icon>
</div>

复选标记应居中。同样：

<div class="resultIconContainer" style="border-radius:50%">
  <v-icon dark x-large color="#90be6d">
    mdi-check
  </v-icon>
</div>

我已经尝试了所有常用的 CSS 东西，但似乎没有任何效果。我确实在 vuetify.js 中指定了 Material 图标：

import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader

export default new Vuetify({
  icons: {
    iconfont: 'mdi', // default - only for display purposes
  },
});

【问题讨论】：

标签： vuetify.js

【解决方案1】：

不知何故，图标有padding-right: 20px;

如果我改变这个：

i[data-v-2cc88beb] {
  padding: 0;
}

修复它

【讨论】：