Change icons

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.

In this example, we will change the checkbox icons. These icons are specified by the gbc-CheckBoxWidget-unchecked-icon, gbc-CheckBoxWidget-indeterminate-icon, and gbc-CheckBoxWidget-checked-icon theme variables. The default checkbox icons look as in Figure 1.

Figure: Default checkbox icons


Note:

To change the icons for other widgets, set the relevant 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 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.

  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. Identify the icons you want to use:
    1. Go to the https://pictogrammers.github.io/@mdi/font/6.6.96/ web site.
    2. Look up the text description for the icon you want to use, as in Figure 2.

      You need the text description without the mdi- prefix, that is, "triangle" not "mdi-triangle".

      Figure: Material Design icons


  4. Edit mdi-cust-icons to include the new icons. For example, to add three icons called triangle, triangle-outline, and alert: 
    // in theme.scss.json
{
  ...
  "mdi-cust-icons": "triangle triangle-outline alert",
  ...
}
  5. 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",
  ...
}
  6. If you created a new theme part, add it to one or more themes.
  7. Save your changes and rebuild your customization using gbc build: 
    $ gbc build --customization customization-project-dir
  8. Test that your changes work as expected.

    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.
    Figure: New checkbox icons


    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.