vant/src/icon

Icon

Intro

The font-based icon set can be used through the Icon component or referenced in other components through the icon property.

Install

Register component globally via app.use, refer to Component Registration for more registration ways。

import { createApp } from 'vue';
import { Icon } from 'vant';

const app = createApp();
app.use(Icon);

Usage

Basic Usage

Use name prop to set icon name or icon URL.

<van-icon name="chat-o" />
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />

Show Badge

Use dot prop, a small red dot will be displayed in the upper right corner of the icon.

Use badge prop, the badge will be displayed in the upper right corner of the icon.

<van-icon name="chat-o" dot />
<van-icon name="chat-o" badge="9" />
<van-icon name="chat-o" badge="99+" />

Icon Color

Use color prop to set icon color.

<van-icon name="cart-o" color="#1989fa" />
<van-icon name="fire-o" color="#ee0a24" />

Icon Size

Use size prop to set icon size.

<van-icon name="chat-o" size="40" /> <van-icon name="chat-o" size="3rem" />

Use local font file

Icon uses font file in yzcdn.cn by default，if you want to use the local font file，please import the following css file.

import 'vant/lib/icon/local.css';

Tips: Starting from version 2.10.13, Vant will use local font files in woff2 format by default

Add custom iconfont

@font-face {
  font-family: 'my-icon';
  src: url('./my-icon.ttf') format('truetype');
}

.my-icon {
  font-family: 'my-icon';
}

.my-icon-extra::before {
  content: '\e626';
}

<van-icon class-prefix="my-icon" name="extra" />

API

Props

Attribute	Description	Type	Default
name	Icon name or URL	string	''
dot	Whether to show red dot	boolean	false
badge	Content of the badge	number | string	''
color	Icon color	string	inherit
size	Icon size	number | string	inherit
class-prefix	ClassName prefix	string	van-icon
tag	HTML Tag	string	i

Events

Event	Description	Arguments
click	Emitted when icon is clicked	event: MouseEvent