Is there a best practice for toggling between two SVGs?
I currently have two buttons and just us "hide" to only show the correct one (see below).
I have other simpler cases where all I want to do is change the color, but there doesn't seem to be a conditional way to set a button_icon color (can set the fill and make it bold, but can't change the color or change the SVG).
If I can, I use a button bar and hide one of the 2 segments. Just size the button bar to the dimension of one button (size is preserved when hiding other segments).
Button bars can make it easier if you want to calculate a label. Just know that styling options are not exactly the same as the ones for buttons.
Button bars avoid overlapping elements, something I like, but getting the display to refresh can be problematic sometimes.
Of course, you can always make distinct layout objects, overlap them and make sure their hide conditions are mutually exclusive.
Not sure if I would define any of that as "best practice", just available options.
Curious to see of someone will suggest something else...
@JasonMark :
@Malcolm is right, if the svg has the fmfill class inserted. Look at this thread: SVG image format for button icons
Re: using a 2-segment button bar and conditionally hiding one or the other, I recently noticed that WebDirect does not always honor the segment resizing. I don't remember the exact situation, but it's one thing to keep an eye out for when you use this technique. If deploying to WD, test this specifically.
if you only have these two forms, one the outline, one outline plus fill, in my opinion the 2-layer approach is fastest:
this keeps it just one svg, no hiding via object settings in the inspector
Why don’t you just use a simple star symbol without outline. Use light grey and yellow for conditional formatting. Easy and pretty.
if you have users with a disability to distinguish between certain colours outline vs. filled is really helpful 
Ya'll are awesome!
