elementui ico
ElementUI 图标使用指南
ElementUI 默认使用 字体图标(通过 el-icon-xxx 类名),但在新版本中也支持了 SVG 图标(通过 <el-icon> 组件)。以下是两种方式的具体使用方法:
字体图标(传统方式)
在 ElementUI 中,字体图标通过类名调用,例如 el-icon-edit。使用时需在 i 标签或按钮等组件中添加对应的类名。
<i class="el-icon-edit"></i>
<el-button icon="el-icon-search">搜索</el-button>
SVG 图标(推荐方式)
ElementUI 从 2.0 版本开始支持 SVG 图标,需单独引入 @element-plus/icons(Element Plus)或使用内置的 SVG 图标组件。

<template>
<el-icon><Edit /></el-icon>
<el-button :icon="Search" />
</template>
<script>
import { Edit, Search } from '@element-plus/icons'
export default {
components: { Edit, Search }
}
</script>
自定义图标
如需使用第三方图标库(如 Font Awesome 或自定义 SVG),可通过以下方式集成:
-
覆盖默认图标
通过修改el-icon的 CSS 或替换组件实现。
-
直接引入第三方库
例如使用 Font Awesome:
<i class="fas fa-user"></i>
图标集合查询
ElementUI 提供的完整图标列表可参考官方文档:
注意事项
- 字体图标需引入 ElementUI 的 CSS 文件。
- SVG 图标需单独安装依赖(如
@element-plus/icons)。 - 图标类名需严格匹配,大小写敏感。






