Icon labels in Web App Builder

12-27-2017 02:42 AM
Status: Open
New Contributor II

We're looking to deploy some of our public GIS functionality to ArcGIS Online, specifically using Web App Builder. We're a local authority, and have a user base with the full range of abilities.

Unfortunately, we have issues with the usability of this template - obviously a map-based website isn't going to meet all WAI standards; I mean usability in a more pragmatic sense. We're going to be using the legend, layer list and basemap widgets for everything, but to my mind their icons are going to be fairly impenetrable to the general public user.

Come again? Funky ladder, exploded sandwich.... is that a pizza?

I'd like to be able to toggle labels on and off. I appreciate this will require some tweaks to margins and so on, and will not work at all well for the vertically stacked layouts, but for another 15 or so pixels in height, automated width & 5 pixel padding you can have this:

Which won't terrify our older or less confident users nearly as much as renditions of foodstuffs. They came here to find out where to vote...

Flippancy aside, I realise it's a hard job to come up with an icon which epitomises an abstract concept, and they're good once you understand what they do - but I don't think they convey enough meaning in a 30px square.


This is a really good idea.  I was just thinking today about how our users don't tend to use our maps every single day like the GIS Analysts do, and it would be awesome if you could add labels in Web App Builder widgets as little reminders.


I agree, great idea! Your example of the labels under the widget icon look fantastic! I'd love to have this option.


Great idea! I have built and used quite a few of the web apps now and still have to think about what each of the icons is when trying to find the right widget to configure/use.  A lot of people we’ve shown the apps to struggle with identifying the icons and what they might be (even when there are only a few in the app).  Words would make it so much clearer!


Hi guys - I agree that this would be a great option to have a a check mark in the configurations of a widget. 

I have a similar need and have a workaround until they make a nice interface for it in WAB.  We accomplished adding text to our graphics by downloading the graphic for the existing icon, resizing it to be a tad smaller, then added text to the bottom of it (much as you have done above).  You may then just click on "Change Widget Icon" in the configuration and point to the icon on your local machine.  It will be stored in the JSON of the application so you need not even upload the icon if you dont want to do that.  Keep in mind that if you make a copy of the application, it seems to lose those custom icons.  Just keep a copy so you can fix that if you make a copy.

Hope this is helpful.