element-plus/docs/en-US/component/icon.md

title	lang
Icon	en-US

Icon

Element Plus provides a set of common icons.

:::warning

⚠️ Font Icon has been removed, since version 1.2.0-beta.1.

:::

Icon Usage

• If you want to use directly like the example, you need to globally register the components before using it.

• If you want to see all available SVG icons please check @element-plus/icons-vue and the source element-plus-icons out or Icon Collection

• CDN importing and auto importing is under developing.

Installation

Using packaging manager

# Choose a package manager you like.

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

Simple usage

:::warning

Because HTML standard has already defined a tag named menu, so you need to use an alias in order to render the icon, if you register Menu directly it will not work.

:::

<!-- 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>

Combined with el-icon

el-icon provides extra attributes for raw SVG icon, for more detail, please read to the end.

<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>

with extra class is-loading, your icon is able to rotate 360 deg in 2 seconds, you can also override this

Search

Using SVG icon directly

<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>

Icon Collection

:::tip

You can use SVG icon in any version as long as you install it

You can click the icon to copy it

:::

Icon Attributes

Attribute	Description	Type	Acceptable Value	Default
color	SVG tag's fill attribute	Pick<CSSProperties, 'color'>	-	inherit from color
size	SVG icon size, size x size	number | string	-	inherit from font size

Icon Slots

Name	Description
—	customize default content