Vuetify 图标不在按钮内居中答案

【问题标题】：Vuetify icons not centered inside buttonVuetify 图标不在按钮内居中
【发布时间】：2018-06-07 15:39:36
【问题描述】：

我正在尝试在 Vuetify 中使用浮动操作按钮，但图标与按钮不对齐：

这是我安装 Vuetify 的方式：

import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import 'babel-polyfill'  // Required by Vuetify for IE11-era browsers

Vue.use(Vuetify)

这是一个显示我在做什么的 CodePen：https://codepen.io/anon/pen/vrXrYg?editors=1000

<div id="app">
  <v-app>
    <v-toolbar color="indigo" dark fixed app>
      <v-toolbar-title>My App</v-toolbar-title>
    </v-toolbar>
    <v-content>
      <v-container fluid fill-height>
          <div id="my-vue-component">
            <v-btn
                   fixed
                   fab
                   bottom
                   right
                   color="pink"
                   >
              <v-icon>
                microphone_off
              </v-icon>
            </v-btn>
          </div>  
        </v-container>
    </v-content>
  </v-app>
</div>

【问题讨论】：

标签： css vue.js vuetify.js

【解决方案1】：

您要查找的图标在官方材料设计图标文档中简称为mic。从 microphone_off 更改为 mic 在您的 codepen 中起到了作用。

见https://material.io/tools/icons/?icon=mic&style=baseline

【讨论】：

此外，我的 webpack 在导入 Vuetify CSS 后导入材质图标 CSS 破坏了垂直居中。当我把 Vuetify CSS 放在最后时，图标完全居中。

【解决方案2】：

我认为图标名称不合适。您应该参考https://material.io/tools/icons/ 图标名称应为“mic_off”而不是“microphone_off” 另外，Vuetify 文档说 Material Design Icons 支持带有 mdi- 前缀。

【讨论】：