Element Plus 图标不显示怎么办？

欧阳振艳提问于 2026-02-27 17:41:18 阅读 15

组件

我在 Vue3 项目里装了 Element Plus，想用图标但一直显示空白。按照文档引入了 import { Edit } from '@element-plus/icons-vue'，也在组件里注册了，但页面上啥也没有。

模板里写的是这样：

<el-icon>
  <Edit />
</el-icon>

控制台也没报错，就是图标出不来，是不是漏了啥步骤？

我来解答赞 5 收藏

反馈

1 条解答

FSD-佳丽 Lv1

你这种情况大概率是没装图标库的字体文件，或者路径不对。Element Plus 的图标是依赖字体文件的，光引入 JS 组件没用，还得确保字体文件能被加载到。

先确认下你装没装 @element-plus/icons-vue，装了的话，再检查下 main.js 或入口文件里有没有全局引入图标组件，比如：

import * as ElementPlusIconsVue from '@element-plus/icons-vue'



const app = createApp(App)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {

  app.component(key, component)

}

如果只是局部用，你当前那样写是对的，但要确保模板里用的是 <el-icon><Edit /></el-icon> 这种结构，别漏了外层 <el-icon>。

不过最关键的——检查下 node_modules/@element-plus/icons-vue/dist 里有没有 css 或 fonts 相关文件。Element Plus 从 v2.4.0 开始把图标样式抽离了，你需要手动引入图标样式：

在入口文件里加上：

import '@element-plus/icons-vue/dist/style.css'

或者在 main.ts 里：

import '@element-plus/icons-vue/dist/style.css'

注意这个路径是 dist/style.css，不是 style.js，别搞混了。

另外如果用了 Vite，记得检查 vite.config.ts 里有没有对字体文件做奇怪的 alias 或 loader 配置，比如把 .ttf 或 .woff2 给过滤了，这种也会导致字体加载失败。

最后建议你打开浏览器开发者工具的 Network 标签，过滤 .ttf 或 fonts，看有没有 404，一般问题就出在这儿。

2026-02-27 18:01