Vuetify 图标渲染宽度过大

问题描述

我刚刚开始使用 Vuetify 的 Vue 项目，我正在尝试使用 v-icon 呈现一些图标。

在我的组件中，我有这个代码：

<template>
  <div>
    <v-icon>domain<v-icon>
    <v-icon>credit_card_outline</v-icon>
  </div>
</template>

domain 图标的渲染效果很好。但是，credit_card_outline 的渲染呈现高度为 45px，宽度为 216px

它几乎就像是实际文本的渲染空间......它适用于许多图标（例如 playlist_add 工作），但对于许多图标它没有......

可能导致此错误的原因是什么？

解决方法

我没有详细回答两者之间的区别，Vue 不能很好地处理带有 _ 的 mdi 图标

这不会有多余的空间：

<v-icon> mdi-credit-card-outline </v-icon>