This procedure shows you how to change the Checkbox icon.

Let's transform this...

Before you Begin

This procedure assumes you know how to create or locate theme parts, and how to add theme parts to a theme in your customization. To review, see the topics:

• Add a theme part
• Add a theme
• Modify a theme

Edit the value of the theme variable

Theme variables are set in the theme.scss.json file, included as part of a theme part. You can update the theme.scss.json file in an existing theme part, or you can create a new theme part.

Once you have identified the theme part you will create or modify, open the theme.scss.json file in a text editor.

Add the needed icons in the cutomization compilation

mdi-cust-icons is used to add additional icons in the stylesheet. Add the icons wanted for customization:

// in theme.scss.json
{
  …
  "mdi-cust-icons": "triangle triangle-outline alert",
  …
}

Note that this will only work with icons provided by mdi. If you want to use custom images or external resources, you will need to create a custom checkbox widget.

Set values of the icons theme variable

By setting gbc-CheckBoxWidget-unchecked-icon, gbc-CheckBoxWidget-indeterminate-icon and gbc-CheckBoxWidget-checked-icon, you can apply your icons to the CheckBoxWidget variables:

// in theme.scss.json
{
  …
"gbc-CheckBoxWidget-unchecked-icon": "triangle-outline",
"gbc-CheckBoxWidget-indeterminate-icon": "alert",
"gbc-CheckBoxWidget-checked-icon": "triangle",
  …
}

Compile and run

$ grunt --customization=<MyCust>

And voila!