Skip to main content
Version: v11.9.2

Change Icon Color on Condition

In WaveMaker, widgets can display icon for Panel, Button, and more. You can choose the icons from the list of wavicons or font-awesome icons. You can use glyph icons, available here.

You can change the color of an icon based on a condition. In the following example, see how to change the Icon color based on ckeching a Checkbox.

  1. Drag and drop an Icon and a Checkbox widget.
  2. For the Checkbox widget, set the checked value and unchecked value as true and false respectively.

  1. Click on the Icon widget and for the "Icon Class" property click on the bind icon.

  1. Enter the expression as below.
<glyph class name>" + " " + (Widgets.<checkbox_name>.datavalue?"first_calssname":"second_classname")

In this example the expression, text-danger and text-info are the in-build classes of the product which we used to set the color. You can use your own class (defined in the css file) to set the color property.