Change color of search-widget icon

[AndreasEugster]

Is there a way to change the search-widget search-icon-color and background color?

By default the search-widget takes the color from the design-theme. Changing the design will update the background color of the widget. I have a usecase where the search-icon-background should be white and the magnifier icon black.

Challenge 1: Only that specific search-icon background color, not every other widget in the experience which uses the "primary-theme-color"...

Challenge 2: the theme changes only the background of the search-widget-icon. The color of the magnifier is not affectet and stays always white, making it disappear if the background-color is white too...

Any ideas?

 

- Andi

[DaveFullerton]

Please support the idea about this issue that I posted here: https://community.esri.com/t5/arcgis-experience-builder-ideas/search-widget-add-style-settings-for-t...

Adding a comment about why this is important for your organization and how many people it effects would further help push this along.

[AndreasEugster]

I'll support the idea asap.

In the meantime, the workaround: After downloading the app, manipulate the widget.js file by adding the color and background-color to the .search-button.

...\cdn\0\widgets\common\search\dist\runtime\widget.js

.search-button {
	width: ${n.polished.rem(32)};
	border-radius: 0;
	color: #4678B4;
	background-color: white;
    }

[VictoriaDavis1]

Changing the primary theme color should be what you're looking for 

[AndreasEugster]

...make the primary color white to see the issue 🙂