You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

在哪里可以获取可供Vuetify使用的MDI图标资源?

Vuetify 可用MDI图标资源获取方案

你提到的<v-icon>mdi-iconname</v-icon>是Vuetify框架默认支持的MDI图标调用格式,可通过以下途径获取完整的图标资源:

  • 项目内直接安装图标包:通过npm、yarn等包管理工具安装对应版本的MDI图标依赖包到你的Vuetify项目中,安装完成后所有官方提供的MDI图标都可以直接通过mdi-前缀加图标名的格式调用,不需要额外引入外部资源。
  • 离线查询图标名:如果你需要查询所有可用的图标名称,可安装本地离线版MDI图标查询工具,或者直接查看安装完成的MDI依赖包内自带的图标清单文件,所有支持的图标名称都完整收录在清单中,直接复制对应名称到<v-icon>标签内即可使用。
  • 版本适配提示:不同版本的Vuetify对应支持的MDI图标版本有差异,建议你根据项目使用的Vuetify版本选择匹配的MDI依赖版本安装,避免出现图标调用后无法正常显示的问题。

注意你示例中写的mid-iconname为拼写误差,正确的图标名前缀为mdi-,正确调用示例为<v-icon>mdi-home</v-icon>。

内容的提问来源于stack exchange,提问作者EDMOND GIHOZO

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.01 03:48:03