Javascript 快速拨号图标未居中

我正在尝试为web应用程序构建一个快速拨号，但无论我尝试什么，快速拨号中的图标都偏离中心

我在上遵循了教程，但即使我从那里复制并粘贴代码，图标也不会居中

<v-speed-dial
        fab
        bottom
        right
        fixed
        v-model="fab"
        direction="top"
        transition="slide-y-reverse-transition"
      >
        <v-btn
          icon
          slot="activator"
          fab
          dark
          color="blue lighten-2"
          v-model="fab"
        >
          <v-icon>account_circle</v-icon>

          <v-icon>close</v-icon>
        </v-btn>

        <v-btn fab dark small color="green">
          <v-icon>edit</v-icon>
        </v-btn>

        <v-btn fab dark small color="indigo">
          <v-icon>add</v-icon>
        </v-btn>
      </v-speed-dial>

会计圈
关闭
编辑
添加

实际行为：

预期行为：

---

有人知道我做错了什么吗？

您可能需要检查控制台中的v图标对齐属性。此css似乎会影响内部图标的位置

.v-icon {
    align-items: center;
    display: inline-flex;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    font-size: 24px;
    justify-content: center;
    line-height: 1;
    transition: .3s cubic-bezier(.25,.8,.5,1);
    vertical-align: text-bottom;
    box-shadow: 0 0 black;
}