Can the interactive icon colors in widgets be configured individually in ArcGIS Experience Builder?

Answer

No, the interactive icon colors in widgets, such as the search icon in the Search widget and the point marker icon in the Near Me widget, cannot be configured individually in ArcGIS Experience Builder. The color is determined by the primary theme setting, which is uniformly applied to all widget headers and the background colors of the interactive icons within an experience. By default, the primary setting color is blue for the icon background and white for the icon itself.

However, there are workarounds to customize the widget colors by configuring the icon background colors and using the Widget Controller. To change the background color, follow the steps below.

1. Open the ArcGIS Experience Builder experience.
2. On the left toolbar, click Theme.
3. In the Theme panel, click Customize.
4. Under Theme colors, click the icon above Primary and select a color from the color picker.

5. Click Save and Publish to save and publish the experience.

The Search widget below shows the background color of the interactive icon changed from the default blue color.

Another workaround is to use the Widget Controller widget. The interactive icon color of the Widget Controller can be customized independently from the primary theme color. This customization only applies to the icon within the container, not the header or the interactive icon in the opened widget. Follow the steps below to customize the icon and icon background colors for widgets within the Widget Controller.

1. Open the ArcGIS Experience Builder's experience.
2. On the canvas, click the Widget Controller widget.
3. In the Widget Controller configuration panel, on the Content tab, toggle Advanced on.
4. On the Default tab, expand Icon style.
5. For Icon color, select a color from the color picker. This uniformly configures the color for all icons within the container.
6. For Background color, select a color from the color picker. This uniformly configures the background color independently from the primary theme color.

7. Click Save and Publish to save and publish the experience.

The experience below shows the black icon with yellow background color for the widgets within the container.

The widget icon color in the container can also be individually customized through the configuration panel of the widgets nested in the Widget Controller. However, this customization does not extend to the icon background color. Follow the steps below to apply a distinct color to each widget icon.

1. On the canvas, click the Widget Controller widget and the widget nested in it.
2. On the nested widget configuration panel, click the widget icon next to the widget name.

3. Click the color at the bottom of the pane to open the color picker.

4. Select a color from the color picker.
5. Repeat Steps 1 through 4 to customize the icon color for other widgets in the container.
6. Click Save and Publish to save and publish the experience.

The experience below shows the distinct icon color for each widget within the container.