vant/docs/markdown/en-US/icon.md

Icon

Install

import { Icon } from 'vant';

Vue.use(Icon);

Usage

Basic Usage

View all usable icons on the right.

<van-icon name="success" />

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/vant-css/icon-local.css';

Add custom iconfont

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

.van-icon {
  font-family: 'vant-icon', 'custom-iconfont' !important;
}

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

<van-icon name="extra" />

API

Attribute	Description	Type	Default
name	Icon name	String	''
info	Info message	`String	Number`
color	Icon color	String	''

Event

Event	Description	Arguments
click	Triggered when click icon	-