Vant Icon icon

Introduced

Based on the font-based icon set, you can use the ICON component, or you can reference the ICON attribute in other components.

Introduced

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

Vue.use(Icon);

Code demo

Basic usage

Icon's name property supports incoming icon names or picture links, and all available icon names can be found in the example on the right

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

Tips

When you set the dot property, a small red dot appears in the upper right corner of the icon. When you set the info property, the logo appears in the upper right corner of the icon

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

The color of the icon

Icon's color property is used to set the color of the icon

<van-icon name="chat-o" color="#1989fa" />
<van-icon name="chat-o" color="#07c160" />

The size of the icon

Icon's size property is used to set the size of the icon in px

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

Use a local font file

The Icon component refers by default to a font file provided by a like CDN and is downloaded over the network. If you need to use a local font file in your project, introduce the CSS file below and configure url-loader in your project

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

Custom icons

If you need to use more icons on top of your existing Icon, you can introduce font files and CSS files for third-party iconfont, which can then be used directly in the Icon component

/* 引入第三方或自定义的字体图标样式 */
@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';
}

<!-- 通过 class-prefix 指定类名为 my-icon -->
<van-icon class-prefix="my-icon" name="extra" />

Api

Props

Events