Change icon image via widget library

page-and-widget-styles

#1

Hey,

I am working in a company that holds 2 different brands with two shops. Both shops are basically identical, except for their color scheme and icon language. So what I did is to build one prototype with all the shop functionality I need and two Libraries - one for each brand.

So far this works perfectly. I just need to import the respective library when opening my prototype to have the shop in color scheme A (for the first brand) or color scheme B (for the second brand). And switching back and forth is no issue at all.

My issue now is that the two brands have different icon sets (lets say brand A uses Materialicons and Brand B uses FontAwesome). Is there any way to exchange the icon set in my prototype to use a different one? I was hoping to set a style for an icon, but as far as I understand, styles don’t change the actual icon image, just things like colors, opacity, etc.

Also happy to find creative workarounds if someone has ideas…


#2

For icons in a library, where you basically want an icon widget to be one of several variants, you could try one of these methods, which use a global variable to set the brand type. Each icon will set itself to the correct brand automatically when the page loads, and all this will persist in the Axure library.

  • If the icons do not need to have selection states, you could use the normal state for Brand A and the selected state for Brand B. Set the selected style to an image and import your Brand B image file. in the widget’s OnLoaded event, set “selected to true” if brandVar equals “B”.

  • If you use selection states for icon styling/swapping or if you need more than two icon brands/styles, then you could convert your icon to a dynamic panel. Create a new state for each brand. In the OnLoaded event for the dynamic panel, set the state accordingly.

Recent thread where I offered a few approaches for co-branding…


#3

Hey, I also thought of the dynamic panel solution in the beginning, but that feels like quite some work. But I like the “change Icon on selected” option. I actually did that frequently in the past for other reasons. It might work for most of the icons. And for the ones I actually need the selected state I can still go for the “bigger” solution and use a dynamic panel.

I would still have been awesome to have this somehow out of the box, but Axure would not be Axure if it wasn’t for finding some some workarounds here and there.

Thanks for your input. I will see how far I will go with that!