Vuetify 使用 Material Design 的 v-icon 图标不居中该怎么解决？

核心原因 #

v-icon默认inline-block布局与MDI字体行高不匹配，外层容器仅配置水平居中规则未处理垂直居中，图标名称前后的空白字符也会加剧偏移。

场景1：基础使用修正 #

给外层容器添加Vuetify内置flex布局工具类，同时指定容器宽高作为居中参照：

<!-- 宽高可根据实际需求调整 -->
<div class="d-flex justify-center align-center" style="width: 100px; height: 100px;">
  <v-icon dark x-large color="#90be6d">mdi-check</v-icon>
</div>

场景2：圆形容器使用修正 #

除flex居中规则外，圆形容器需指定相等的宽高才能渲染为正圆，同时删除v-icon内部图标名称前后的换行与空白字符：

<div 
  class="resultIconContainer d-flex justify-center align-center" 
  style="border-radius: 50%; width: 80px; height: 80px; background: #f8f9fa;"
>
  <v-icon dark x-large color="#90be6d">mdi-check</v-icon>
</div>

全局统一修复 #

如果需要所有v-icon默认居中，直接在项目全局样式文件中添加如下CSS规则即可，无需逐个修改布局：

.v-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
}

微调方案 #

若仍有个别小尺寸图标存在细微偏移，可单独给对应v-icon添加align-middle类调整：

<v-icon class="align-middle" dark x-large color="#90be6d">mdi-check</v-icon>

内容的提问来源于stack exchange，提问作者Joseph