el-button的icon值有哪些
时间: 2025-06-04 13:08:53 浏览: 31
`el-button` 是 Element Plus 提供的一个按钮组件,支持通过 `icon` 属性设置按钮的图标。`icon` 的值可以是 Element Plus 自带的图标类名或自定义图标的类名。
### 支持的图标列表
Element Plus 提供了一组内置的 SVG 图标,可以直接通过 `el-icon` 使用。以下是常用的图标名称:
#### 常用图标示例
- **箭头方向类**:
- `el-icon-arrow-up`
- `el-icon-arrow-down`
- `el-icon-arrow-left`
- `el-icon-arrow-right`
- **操作类**:
- `el-icon-edit`
- `el-icon-delete`
- `el-icon-search`
- `el-icon-plus`
- `el-icon-info`
- `el-icon-check`
- `el-icon-close`
- **媒体类**:
- `el-icon-picture`
- `el-icon-video-camera`
- `el-icon-upload`
- `el-icon-download`
- **其他**:
- `el-icon-user`
- `el-icon-setting`
- `el-icon-loading`
完整的图标列表可以参考 [Element Plus 官方文档](https://element-plus.org/en-US/component/icon.html#svg-icon)。
---
### 示例代码
以下是一个使用 `el-button` 和 `icon` 的示例代码:
```vue
<template>
<div>
<!-- 带图标的按钮 -->
<el-button type="primary" icon="el-icon-search">搜索</el-button>
<el-button type="success" icon="el-icon-plus">新增</el-button>
<el-button type="danger" icon="el-icon-delete">删除</el-button>
<el-button type="warning" icon="el-icon-edit">编辑</el-button>
<!-- 仅显示图标的按钮 -->
<el-button type="info" icon="el-icon-arrow-up" circle></el-button>
<el-button type="info" icon="el-icon-arrow-down" circle></el-button>
<el-button type="info" icon="el-icon-arrow-left" circle></el-button>
<el-button type="info" icon="el-icon-arrow-right" circle></el-button>
</div>
</template>
<script>
export default {
name: "ButtonIconExample",
};
</script>
```
---
### 代码解释
1. **`icon` 属性**:
- `icon` 属性用于指定按钮的图标。
- 图标名称需要以 `el-icon-` 开头,例如 `el-icon-search`。
2. **`circle` 属性**:
- 如果希望按钮仅显示图标并呈现圆形样式,可以添加 `circle` 属性。
3. **按钮类型**:
- `type` 属性用于设置按钮的样式,例如 `primary`、`success`、`danger` 等。
---
###
阅读全文
相关推荐



















