You can use predefined colors for toolbar icons to make the icons consistent with the entire dashboard application. For example, you can use the predefined color for a new toolbar button. In this case, the button's color depends on the selected Web Dashboard theme.
The table below lists the available predefined color classes:
The theme's primary color.
The theme's additional color.
The theme's accent color.
A green hue based on the theme.
A red hue based on the theme.
A yellow hue based on the theme.
Use the class="colorName" attribute in the icon's svg definition to specify the icon's color. If you want to change an icon's color when it is hovered, add the style="fill: currentColor" attribute to the svg definition.
The code snippet below defines an icon that changes its color depending on the theme's primary color and when you hover over it:
The following example shows how to add a toolbar item to the dashboard item caption. The code snippet below creates a custom button with a popup menu for the Chart dashboard item. The ItemCaptionToolbarUpdated event is used to customize the dashboard item caption. The button belongs to the actionItems collection and is displayed only when the mouse pointer hovers over the dashboard item caption. The popup menu contains three icon elements.