Set Icon on custom button widget?

Custom Widgets
1

Hello,

I’ve created a couple of custom button widgets:

  1. Hides or shows the button based on a boolean variable.
  2. Allows the button’s color, text, and event triggers to change based on boolean.

Overall, super happy with custom widgets! Is there a way for me to support icons in my custom button similar to how they’re supported in the native button widget?

2

Hey @richard.vaughn -

Glad to hear you’re playing with custom widgets! I really really like them too.

I attempted to follow this guide but didn’t have any luck:

I reached out to our engineering team to understand what about custom widgets might be blocking this from working as expected. I’ll let you know what I hear.

Pete

3

Some more detail from the developers-

That guide doesn’t work for CW because the library they callout has a whole ton of dependent libraries that we don’t nativly support. Even if we did this would be far from a performative way to load this data.

There isn’t a great way to match the icon behavior of the Tulip Buttons (because they are made in React which is a bit more flexible for this sort of thing), but you could conceivably have a bunch of inline SVG’s that could be inserted into the DOM.

If you look at the default CSS for custom widgets, you will see where we do this for the select tag:

select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' class='sc-fznWqX bsCTUN'%3E%3Cpath d='M7 10l5 5 5-5z'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.5rem center;
	background-size: auto 55%;
	border: 1px solid #DFE1E5;
	border-radius: 3px;
	color: #182339;
	font-size: 40px;
	padding: 15px;
	padding-right: 45px;
}

Hope this helps,
Pete

4

Awesome, Thank you for the info!