Element Plus 图标为啥不显示？

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

组件

我按照官方文档装了 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组件图标使用

我来解答赞 13 收藏

反馈

2 条解答

司空超霞 Lv1

遇到这个问题确实挺头疼的。Element Plus 的图标组件默认情况下不会自动引入所有的图标，所以你需要手动引入你需要的图标。你可以在你的 main.js 文件里做一下调整。首先确保你已经安装了 @element-plus/icons-vue，如果没有的话，可以通过 npm 或 yarn 安装一下。然后你可以按照下面的方式引入你需要的图标：

pre class="pure-highlightjs line-numbers">

import { createApp } from 'vue'

import App from './App.vue'

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

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



const app = createApp(App)

app.use(ElementPlus)



// 注册你需要的图标

app.component('Search', Search)



app.mount('#app')

这样你就可以在模板中直接使用了。当然，如果你有很多图标需要使用，一个一个注册会很麻烦。你可以选择一次性导入所有的图标，但这样打包后的文件会比较大，根据实际需求来决定吧。如果项目中图标不多，一个个注册其实也还好，代码也更清晰一些。

2026-03-21 15:01

设计师一茹 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