This procedure shows you how to change the checkbox icons. It involves setting theme
variables.
About this task
GBC comes with default icons, which are a subset of those provided by Material Design (https://materialdesignicons.com/) . GBC does not include all
possible Material Design icons (MDI), because this would make the client very large. However, you
can add additional Material Design icons to GBC using the mdi-cust-icons theme variable.
Note:
This works only with icons provided by Material Design. To use custom images or
external resources, create a custom checkbox widget.
This procedure assumes you are comfortable updating theme parts and
themes. For the basic principles behind themes and theme parts, see How customization works. For instructions about adding and modifying
themes and theme parts, see Working with themes. For
information about the underlying GBC infrastructure and its components, see Theme reference.
Identify the theme part you plan to update. If you are creating a new theme
part, prepare the directory.
In the theme part, open the theme.scss.json file in a text editor.
To apply your icons to the CheckBoxWidget, edit
gbc-CheckBoxWidget-unchecked-icon,
gbc-CheckBoxWidget-indeterminate-icon, and
gbc-CheckBoxWidget-checked-icon. For example:
The checkbox icons should now look as in Figure 3.
Tip:
You can check this using the demos application. For example, open the demos application by
entering the URL for your GAS in a browser:
GAS 5.00 and greater
http://localhost:6394/ua/r/demo
GAS prior to 5.00
http://localhost:6394/ua/r/gwc-demo
Navigate to User Interface > UI Basics > Widgets, and open the Checkboxes demo.
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-built 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 Selecting customizations and themes.