add icon to Button widget

[john_cartwright_noaa]

Hello,

I'm using the out-of-the-box Button widget in Experience Builder Developer Edition and would like to change the icon to one of those listed in the API docs. Can someone help me with how to do this?

I see how to add a custom png image but not svg or how to use one of the icons provided via the SDK.

Thanks!

--john

[KevinMWright13]

Thanks for posting, John.  I'll be watching this too as I've had the same question.  I want to use the Esri provided standard calcite icons listed here. Since they are svg I cant import them.

Thanks, 

Kevin

[BuffaloCoWI]

I have basically the same question, though I am not using the Developer Edition, just Experience Builder on ArcGIS Online.

First, I tried adding a Widget Controller then placing widgets for a Legend, Bookmarks, etc. in that container. That gives more choices for icons, since each widget uses its default icon. However, the icons' default blue background cannot be changed, as far as I can tell. If you turn on the Advanced setting, you can change the color of the font and background of the widget's content, but not the widget icon itself nor its background. I want to change the color because I am trying to maintain a consistent color palette for our organization's apps.

Second, I tried adding buttons in the header that link to windows with the desired content in them. This works much better. I can leave the button text blank, choose an appropriate icon, then change its size, color, background, border, and shadow, plus separate settings for hover. However, the icon choices are quite limited.

I also tried copying an icon's SVG code into a text file, then converting it to a PNG. At first that did not work well, because the icon was black in the PNG file, which was hard to see against my header background. Not being a graphic artist, that tripped me up, but editing the color in the SVG code before converting solved that problem. However, that icon's color will not change using the button settings, and increasing the size can make it grainy.

Therefore, my question is, can the icon chooser dialog box include more choices? All the icons for each type of widget are already in the system, just not made available in that menu. They could easily be hidden in a "More icons" sub-menu with the most commonly used icons in the main menu. Alternatively, can the "Add custom icons" function include the ability to upload SVG files, besides raster formats? (Someone asked about that in an earlier thread.) Or yet another alternative, could the icons for widgets in a Widget Controller be formatted through settings?

Thank you!

@SarahMcDonald_Esri @ShengdiZhang 

[BuffaloCoWI]

I did finally figure out how to change the colors of the widgets in the Widget Controller. The theme menu on the left-hand panel let's you customize the colors. Not at all intuitive, and I've been looking for that setting for a couple weeks. It wasn't until I watched my 7th video on Experience Builder, "Modernize Your ArcGIS Web AppBuilder Apps Using Experience Builder," but not anything in the training catalog, nor the 26 min version by that title, but only the hour-long version on the ESRI video platform.