2021-10-22 19:32:39 +08:00
---
2021-10-25 15:21:08 +08:00
title: Icon
2021-10-22 19:32:39 +08:00
lang: en-US
---
2021-09-17 00:18:50 +08:00
# Icon
Element Plus provides a set of common icons.
:::warning
2021-11-29 15:59:32 +08:00
⚠️ **Font Icon** has been removed, since version `1.2.0-beta.1` .
2021-09-17 00:18:50 +08:00
:::
2021-11-29 15:59:32 +08:00
## Icon Usage
2021-09-17 00:18:50 +08:00
- If you want to **use directly** like the example, you need to [globally register ](https://v3.vuejs.org/guide/component-registration.html#global-registration ) the components before using it.
2021-12-04 11:20:06 +08:00
- If you want to see all available SVG icons please check [@element-plus/icons-vue ](https://unpkg.com/browse/@element-plus/icons-vue@latest/dist/es/ ) and the source [element-plus-icons ](https://github.com/element-plus/element-plus-icons ) out or [Icon Collection ](#icons-collection )
2021-09-17 00:18:50 +08:00
2021-11-29 15:59:32 +08:00
- CDN importing and [auto importing ](https://github.com/antfu/unplugin-icons ) is under developing.
2021-09-17 00:18:50 +08:00
2021-11-29 15:59:32 +08:00
## Installation
2021-09-17 00:18:50 +08:00
2021-11-29 15:59:32 +08:00
### Using packaging manager
2021-09-17 00:18:50 +08:00
```shell
2021-11-29 15:59:32 +08:00
# Choose a package manager you like.
# NPM
2021-09-17 00:18:50 +08:00
$ npm install @element -plus/icons
2021-11-29 15:59:32 +08:00
# Yarn
$ yarn add @element -plus/icons
# pnpm
$ pnpm install @element -plus/icons
2021-09-17 00:18:50 +08:00
```
## Simple usage
:::warning
Because HTML standard has already defined a tag named [menu ](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu ),
so you need to use an alias in order to render the icon, if you register `Menu` directly it will not work.
:::
```vue
<!-- Use el - icon to provide attributes to SVG icon -->
< template >
< div >
< el-icon :size = "size" :color = "color" >
< edit > < / edit >
< / el-icon >
<!-- Or use it independently without derive attributes from parent -->
< edit > < / edit >
< / div >
< / template >
```
2021-11-29 15:59:32 +08:00
< script setup >
2021-12-04 11:20:06 +08:00
import { Edit, Share, Delete, Search, Loading } from '@element-plus/icons-vue'
2021-11-29 15:59:32 +08:00
< / script >
2021-09-17 00:18:50 +08:00
< ElRow >
< div >
< ElIcon :size = "30" >
< Edit / >
< / ElIcon >
< Edit / >
< / div >
< / ElRow >
## Combined with el-icon
`el-icon` provides extra attributes for raw SVG icon, for more detail, please read to the end.
```vue
< template >
< p >
with extra class < b > is-loading< / b > , your icon is able to rotate 360 deg in 2
seconds, you can also override this
< / p >
< el-icon :size = "20" >
< edit / >
< / el-icon >
< el-icon color = "#409EFC" class = "no-inherit" >
< share / >
< / el-icon >
< el-icon >
< delete / >
< / el-icon >
< el-icon class = "is-loading" >
< loading / >
< / el-icon >
< el-button type = "primary" >
< el-icon style = "vertical-align: middle;" >
< search / >
< / el-icon >
< span style = "vertical-align: middle;" > Search < / span >
< / el-button >
< / template >
```
< ElRow >
< p >
with extra class < b > is-loading< / b > , your icon is able to rotate 360 deg in 2
seconds, you can also override this
< / p >
< div style = "display: flex; align-items: center; justify-content: space-between; width: 100%;" >
< ElIcon :size = "20" >
< Edit / >
< / ElIcon >
< ElIcon color = "#409EFC" class = "no-inherit" >
< Share / >
< / ElIcon >
< ElIcon >
< Delete / >
< / ElIcon >
< ElIcon class = "is-loading" >
< Loading / >
< / ElIcon >
< ElButton type = "primary" >
< ElIcon style = "vertical-align: middle; color: #fff ;" >
< Search / >
< / ElIcon >
< span style = "vertical-align: middle;" > Search < / span >
< / ElButton >
< / div >
< / ElRow >
## Using SVG icon directly
```vue
< template >
< div style = "font-size: 20px;" >
<!-- Since svg icons do not carry any attributes by default -->
<!-- You need to provide attributes directly -->
< edit style = "width: 1em; height: 1em; margin-right: 8px;" / >
< share style = "width: 1em; height: 1em; margin-right: 8px;" / >
< delete style = "width: 1em; height: 1em; margin-right: 8px;" / >
< search style = "width: 1em; height: 1em; margin-right: 8px;" / >
< / div >
< / template >
```
< ElRow >
< div style = "font-size: 20px;" >
<!-- Since svg icons do not carry any attributes by default -->
<!-- You need to provide attributes directly -->
< Edit style = "width: 1em; height: 1em; margin-right: 8px;" / >
< Share style = "width: 1em; height: 1em; margin-right: 8px;" / >
< Delete style = "width: 1em; height: 1em; margin-right: 8px;" / >
< Search style = "width: 1em; height: 1em; margin-right: 8px;" / >
< / div >
< / ElRow >
2021-11-29 15:59:32 +08:00
## Icon Collection
2021-09-17 00:18:50 +08:00
:::tip
**You can use SVG icon in any version** as long as you install it
**You can click the icon to copy it**
:::
< IconList / >
2021-11-10 09:38:05 +08:00
## Icon Attributes
2021-09-17 00:18:50 +08:00
| Attribute | Description | Type | Acceptable Value | Default |
| --------- | -------------------------- | ------------------------------ | ---------------- | ---------------------- |
| color | SVG tag's fill attribute | Pick\<CSSProperties, 'color'\> | - | inherit from color |
2021-10-25 09:43:54 +08:00
| size | SVG icon size, size x size | number \| string | - | inherit from font size |
2021-10-04 08:26:51 +08:00
## Icon Slots
| Name | Description |
| ---- | ------------------------- |
| — | customize default content |