Detailed Introduction of wxapp Content Component icon in WeChat Mini Program

WeChat Mini Program content components

Related articles:

WeChat Mini Program wxapp content component icon

WeChat Mini Program wxapp content component text

WeChat Mini Program wxapp content component progress

icon

Icon.

Attribute name	Type	Default value	Description
type	String		The type of icon, valid values: success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	Number	23	icon size, unit px
color	Color		icon color, the same as css's color

Example:

<view class="group">
 <block wx:for="{{iconSize}}">
 <icon type="success" size="{{item}}"/>
 </block>
</view>
<view class="group">
 <block wx:for="{{iconType}}">
 <icon type="{{item}}" size="45"/>
 </block>
</view>
<view class="group">
 <block wx:for="{{iconColor}}">
 <icon type="success" size="45" color="{{item}}"/>
 </block>
</view>

Page({
 data: {
 iconSize: [20, 30, 40, 50, 60, 70],
 iconColor: [
 'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)
 ],
 iconType: [
 'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn',
 'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download',
 'info_circle', 'cancel', 'search', 'clear'
 ]
 }
)

icon

Thank you for reading, I hope it can help everyone, thank you for your support to our website!