Introduction

In the Vue ecosystem, Element UI is one of the top component libraries. When Vue 3.0 was released, Element also released its corresponding library, Element Plus. Consequently, some usage patterns changed, including how el-icon works.

While the official documentation covers usage, it may not be sufficiently detailed, potentially causing confusion for newcomers. This article explains several way to use el-icon and important notes.

Note: Check the publish date and the Element Plus version used, as differences may arise over time.

• vue: ^3.2.25
• element-plus: ^2.1.7
• @element-plus/icons-vue: ^1.1.4

Preliminary Understanding

Differences between Element UI and Element Plus Icon Usage

In Vue 2 + Element UI:

<i class="el-icon-edit"></i>

In Vue 3 + Element Plus:

<ElIcon :size="30" color="hotpink">
  <edit />
</ElIcon>

<!-- Or use the icon tag directly without a wrapper -->
<edit />

Personally, the Element UI approach is simpler. A follow-up article will explain how to encapsulate a more convenient Icon component based on Element Plus.

Logic of Icon Usage in Element Plus

Element Plus abandoned font icons in favor of SVG icons. The icon set is maintained separately, so you must install the SVG icon library before using icons.

Installation command:

npm install @element-plus/icons-vue

Or using Yarn/pnpm:

# Yarn
yarn add @element-plus/icons-vue

# pnpm
pnpm install @element-plus/icons-vue

There are two usage modes: using SVG icons directly, or wrapping them in the el-icon component. Both global and local registration are covered below.

Using SVG Icons Directly

If you only need the SVG icon library from Element Plus, you can use it without installing Element Plus (though this scenario is rare).

Global Registration

Register all SVG components globally in main.js:

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import * as icons from '@element-plus/icons-vue'

const app = createApp(App)

// Register all SVG components globally
for (const iconName in icons) {
  app.component(iconName, icons[iconName])
}

app.mount('#app')

Or register a specific icon globally (e.g., EditIcon):

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { Edit as EditIcon } from '@element-plus/icons-vue'

const app = createApp(App)
app.component(EditIcon.name, EditIcon)
app.mount('#app')

Then use it in a template:

<template>
  <div>
    <edit-icon />
  </div>
</template>

<style>
svg {
  width: 40px;
  height: 40px;
  color: red;
}
</style>

Local Registration

Import and use the SVG component locally:

<template>
  <div>
    <edit-icon />
  </div>
</template>

<script setup>
import { Edit as EditIcon } from '@element-plus/icons-vue'
</script>

<style>
svg {
  width: 40px;
  height: 40px;
  color: red;
}
</style>

Using el-icon with SVG Icons

The el-icon component wraps SVG icons, making it easier to set size and color. To use it, install Element Plus:

npm install element-plus --save
# or
yarn add element-plus
# or
pnpm install element-plus

Global Registration

In main.js, import Element Plus and the icon:

// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { Edit as EditIcon } from '@element-plus/icons-vue'
import App from './App.vue'

const app = createApp(App)
app.component(EditIcon.name, EditIcon)
app.use(ElementPlus)
app.mount('#app')

Use it in the template:

<el-icon :size="20" color="hotpink">
  <edit-icon />
</el-icon>

Now, size and color properties control the icon's size and color. Note: the size prop must be a number, not a string.

Local Registration

If you import only the necessary component:

<template>
  <div>
    <el-icon :size="30" color="hotpink">
      <edit-icon />
    </el-icon>
  </div>
</template>

<script setup>
import { ElIcon } from 'element-plus'
import { Edit as EditIcon } from '@element-plus/icons-vue'
import 'element-plus/es/components/icon/style/css'
</script>

If you already imported the full Element Plus CSS in main.js, you don't need to import the icon CSS separately.

Conclusion

This covers the essential ways to use icons in Element Plus. Mastering these patterns will help you integrate icons efficiently into your Vue 3 projects.