How can I change the icon of the checkbox widget?

Question

I want to change the icon of the default checkbox widget with ones available from: material.io/resources/icons/

E.g. 'keyboard_arrow_right' before click (or value change) and 'keyboard_arrow_down' after click (value change).

How can I achieve this?

The reason I want to do this is because I want to take advantage of binding the visibility of other UI elements so that they hide / unhide on value change. (This is easy and there is an example in Material Gallery official Google template).

I want to change the icon because of UX reasons.

Alternatively I'd use a button (icon). I don't know how to make it work that way.

Answer 1

To use an icon button to get this accomplished, set a default value in the button text field for how you want the button icon to initially appear which should match whatever state you want the details to appear in, i.e. hidden or unhidden.

Bind the visibility of your hide/unhide element(s) to @widget.root.descendants.YourButton.text === 'keyboard_arrow_down' and then put the following in the onClick event of the button:

if (widget.text === 'keyboard_arrow_right') {
  widget.text = 'keyboard_arrow_down';
} else {
  widget.text = 'keyboard_arrow_right';
}

So if you set your button text property to 'keyboard_arrow_right' in this setup, then your elements/details would be hidden on page load.