This procedure shows you how to change the checkbox icons. It involves setting theme variables.

Overview

The default checkbox icons come with GBC and look as in Figure 1.

Figure 1: Default checkbox icons

You can add additional icons using the mdi-cust-icons theme variable, and apply icons to the checkbox widget using the gbc-CheckBoxWidget-unchecked-icon, gbc-CheckBoxWidget-indeterminate-icon, and gbc-CheckBoxWidget-checked-icon theme variables.

Before you begin

This procedure assumes you are comfortable updating theme parts and themes. For the basic principles behind themes and theme parts, see Customization fundamentals. For instructions about adding and modifying themes and theme parts, see Manage themes.

Edit theme variables

1. Identify the theme part you plan to update. If you are creating a new theme part, prepare the directory.

2. In the theme part, open the theme.scss.json file in a text editor.

3. To add additional icons in the stylesheet, edit mdi-cust-icons. For example:

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

   NOTE: This works only with icons provided by mdi. To use custom images or external resources, create a custom checkbox widget.

4. To apply your icons to the CheckBoxWidget, edit gbc-CheckBoxWidget-unchecked-icon, gbc-CheckBoxWidget-indeterminate-icon and gbc-CheckBoxWidget-checked-icon. For example:

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

5. If you created a new theme part, add it to one or more themes.

Compile

After updating theme.scss.json with the theme variable and ensuring the theme part is assigned to one or more themes, you compile your customization.

$ gbc build --customization <customization_project_dir>

Test

Test that your changes work as expected. The checkbox icons should now look like this:

TIP: You may need to use CTRL + F5 to clear the browser cache before you see your changes.

If your tests do not behave as expected, ensure you are using your newly-compiled custom GBC. Depending on your development environment, you may need to package and deploy a custom GBC client. For information on which customization and theme you are using, see Customization and Theme Selection.