vant-weapp/example/pages/icon/index.wxml

<van-tabs
  active="{{ active }}"
  color="#1989fa"
  bind:change="onSwitch"
>
  <van-tab title="基础图标" custom-class="demo-tab-pane">
    <van-col
      wx:for="{{ icons.basic }}"
      wx:key="index"
      custom-class="col"
      span="6"
    >
      <van-icon
        name="{{ item }}"
        size="32px"
        custom-class="icon"
      />
      <view class="text">{{ item }}</view>
    </van-col>
  </van-tab>
  <van-tab title="线框风格" custom-class="demo-tab-pane">
    <van-col
      wx:for="{{ icons.outline }}"
      wx:key="index"
      custom-class="col"
      span="6"
    >
      <van-icon
        name="{{ item }}"
        size="32px"
        custom-class="icon"
      />
      <view class="text">{{ item }}</view>
    </van-col>
  </van-tab>
  <van-tab title="实底风格" custom-class="demo-tab-pane">
    <van-col
      wx:for="{{ icons.filled }}"
      wx:key="index"
      custom-class="col"
      span="6"
    >
      <van-icon
        name="{{ item }}"
        size="32px"
        custom-class="icon"
      />
      <view class="text">{{ item }}</view>
    </van-col>
  </van-tab>
  <van-tab title="用法示例" custom-class="demo-tab-pane">
    <demo-block title="图标右上角小红点">
      <van-col
        custom-class="col"
        span="6"
      >
        <van-icon
          name="{{ demoIcon }}"
          size="32px"
          custom-class="icon"
        />
        <view class="text">{{ demoIcon }}</view>
      </van-col>
       <van-col
        custom-class="col"
        span="6"
      >
        <van-icon
          name="{{ demoIcon }}"
          size="32px"
          custom-class="icon"
          dot
        />
        <view class="text">{{ demoIcon }}</view>
      </van-col>
    </demo-block>
    <demo-block title="图标右上角文字提示">
        <van-col
          custom-class="col"
          span="6"
        >
          <van-icon
            name="{{ demoIcon }}"
            size="32px"
            custom-class="icon"
          />
          <view class="text">{{ demoIcon }}</view>
        </van-col>
        <van-col
          custom-class="col"
          span="6"
        >
          <van-icon
            name="{{ demoIcon }}"
            size="32px"
            custom-class="icon"
            info="99+"
          />
          <view class="text">{{ demoIcon }}</view>
        </van-col>
      </demo-block>
      <demo-block title="图标颜色">
        <van-col
          custom-class="col"
          span="6"
        >
          <van-icon
            name="{{ demoIcon }}"
            size="32px"
            custom-class="icon"
          />
          <view class="text">{{ demoIcon }}</view>
        </van-col>
        <van-col
          custom-class="col"
          span="6"
        >
          <van-icon
            name="{{ demoIcon }}"
            size="32px"
            custom-class="icon"
            color="red"
          />
          <view class="text">{{ demoIcon }}</view>
        </van-col>
      </demo-block>
      <demo-block title="图标大小">
        <van-col
          custom-class="col"
          span="6"
        >
          <van-icon
            name="{{ demoIcon }}"
            size="32px"
            custom-class="icon"
          />
          <view class="text">{{ demoIcon }}</view>
        </van-col>
        <van-col
          custom-class="col"
          span="6"
        >
          <van-icon
            name="{{ demoIcon }}"
            size="45px"
            custom-class="icon"
          />
          <view class="text">{{ demoIcon }}</view>
        </van-col>
      </demo-block>
    </van-tab>
</van-tabs>