icon

Sets or gets the icon image displayed on the button.

Description

The icon property defines the vector image used as the button’s icon.

Setting icon changes the button icon to the image indicated by the new value. Getting the icon property returns the location of the icon image file. To delete a button's icon set icon to null, undefined, or an empty string.

The following formats are supported:

Vector images from the Media Manager: wix:vector://v1/<vector_uri>/<filename>
Vector images from the web: http(s)://<vector image url>
Vector XML string: <svg>...</svg>

Note: Image Buttons don't support this property.

Type:

stringRead & Write

Related Content:

iconCollapsed, expandIcon, collapseIcon

Was this helpful?

Set a button's icon to a Media Manager image

Copy Code

1$w('#myButton').icon = 'wix:vector://v1/ce0334_2cec984ab68c490891dda1b53a33fead.svg/my-vector-graphic.svg';

Set a button's icon to an XML string

Copy Code

1$w('#myButton').icon = '<svg height="10" width="10"><polygon points="0,9 9,9 5,0" style="fill:lime;stroke:purple;stroke-width:1"/></svg>';

Delete a button's icon

Copy Code

1$w('#myButton').icon = '';

Get a button's icon

Copy Code

1let iconLocation = $w('#myButton').icon;
2// 'wix:vector://v1/ce0334_2cec984ab68c490891dda1b53a33fead.svg/my-vector-graphic.svg'

Change a button's icon when a site visitor clicks the button

Copy Code

1$w('#myButton').onClick((event) => {
2    $w('#myButton').icon = 'wix:vector://v1/ce0334_2cec984ab68c490891dda1b53a33fead.svg/my-vector-graphic.svg';
3});