How do you combine a button and an icon to make a customized button?

Jul 04, 2022

How can I add icons to customized buttons and have all the surface remain clickable? (When I add an icon to a button, the triggers only work with the button, and not the icon which is covering parts of the button surface.)

Grouping the two elements doesn't seem to work as you can't make states with a group. 

This question seems so basic yet I've searched through all the tutorials and discussions on this site and can't see the issue addressed anywhere.

3 Replies
Walt Hamilton

Just FYI, any object can work as a button. It is the trigger that makes it perform an action, so you are not stuck with only buttons.

Anything that you can copy can be made into part of another object, like a button. Copy the icon, edit the states of the button, and paste the icon. It will be a permanent part of the button.

For more complex constructions, it may be easier to create it in a graphic application (like Paint), then import it as a graphic, and attach the states and triggers to it.

Mark Mc Donald

The only suggestion I have found is from four years ago: each button needs to consist of an icon with an invisible box sitting on top, which means dealing with two two objects when setting states eg when you click on the button on top, change the state of the icon below. Setting the icon states also means manually setting them for each "Freeform" part of the icon. 

I just thought there might have been an easier work around developed in the last 4 years. Please tell me if you know about it.

Walt Hamilton

I don't see it as a work around. To me, it is good design practice to extend the built-in activities to match your needs.

Anything that you can copy can be made into part of another object, like a button. Copy the icon, edit the states of the button, and paste the icon. It will be a permanent part of the button. It will all be part of one button. There will be no fooling around with multiple states or triggers.

For more complex constructions, it may be easier to create it in a graphic application (like Paint), then import it as a graphic, and attach the states and triggers to it.

See the attached sample where the shape, marker, and cow icon are  all one object. Adding the marker gives some very interesting possibilities.