Vuetify 2升级至3后Material Icons变小变暗问题求助

Vuetify 3对Material Icons的默认样式做了调整，包括默认字体大小、透明度都和v2版本不同，这就是图标缩小、变暗的原因。你可以通过主题全局配置来统一修复这个问题，具体操作如下：

全局主题配置（推荐） #

在Vuetify初始化时，通过defaults属性全局设置VIcon的默认样式，一次性解决所有图标显示问题：

createVuetify({
  defaults: {
    VIcon: {
      size: '24px', // 对应Vuetify 2的默认图标大小，可按需调整
      opacity: 1    // 消除图标变暗的情况，设置为完全不透明
    }
  }
})

单个图标临时调整 #

如果只需要修正特定图标，也可以直接给v-icon添加属性：

<v-btn color="primary" v-bind="props" dark text fab large>
  <v-icon icon="account_circle" size="24" opacity="1"></v-icon>
</v-btn>

另外确认你的CDN链接没有问题，当前使用的Google Material Icons链接是正确的，无需更换。

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