Element Plus 图标为啥不显示？

青燕提问于 2026-03-09 05:43:23 阅读 13

组件

我按照官方文档装了 Element Plus，也引入了图标组件，但页面上图标就是不显示，只看到一个方框。是不是还要额外引入图标库？

我试过这样写：<el-icon><Search /></el-icon>，但控制台报错说 Search 未定义。难道每个图标都要单独 import 吗？

这是我的 main.js 部分代码：

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

UI组件 Vue组件图标使用

我来解答赞 5 收藏

反馈

1 条解答

设计师一茹 Lv1

哎呀这个坑我踩过！Element Plus 的图标确实是需要单独引入的，官方文档写得不太明显。你需要额外安装 @element-plus/icons-vue 这个包。

先安装图标库：

npm install @element-plus/icons-vue

然后在 main.js 里加上图标引入：

import { Search } from '@element-plus/icons-vue'



const app = createApp(App)

app.component('Search', Search) // 这样就能全局用了

app.use(ElementPlus)

app.mount('#app')

或者你也可以在具体组件里局部引入：

import { Search } from '@element-plus/icons-vue'



export default {

  components: { Search }

}

图标显示不出来一般都是因为没正确引入，我当初也被这个坑耽误了半天，后来在 GitHub issue 里找到答案的。Element Plus 把图标拆分成独立包这个设计确实有点迷惑。

2026-03-09 06:02