vant/src/icon

Icon

Intro

The font-based icon set that can be used via the Icon component or referenced in other components via the icon attribute.

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

Using URL

You can directly passing an image URL to the name props.

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

<!-- Using px unit by default -->
<van-icon name="chat-o" size="40" />
<!-- Using rem unit -->
<van-icon name="chat-o" size="3rem" />

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 of root element	string	i

Events

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