SVG icon in RibbonButton

[claudiobosticco]

Hello, I'm trying to use SVG icons in RibbonButtons (icon attribute), but I can't see a change in color on over, I've tried showRollOver, showRollOverIcon, iconStyle. Is it expected or am I missing something?

[Isomorphic]

hi Claudio - ribbonButton.iconStyle controls the icon and is unset in the framework - in this case, the default CSS class for RibbonButton.icon is .ribbonButton[V/H]Icon, and those classes are not stateful in the skins.

We'll look at adding the stateful variants to the framework skins and Skin Editor.

In the meantime, you should be able to use a custom CSS class - this quick test should show icons changing as you expect:

var ssh = isc.StyleSheetHandler.create({
    autoLoad: true,
    cssText: " .myIcon { color: grey; }  .myIconOver { color: red; } "
})

isc.RibbonButton.addProperties({ iconStyle: "myIcon" });

[claudiobosticco]

Hi, thanks for your reply - yes, it would definitely be nice to have those stateful styles available in the framework skins and the Skin Editor.
But thanks for the workaround suggestion, that helps!
And finally, thanks for the heads-up about the StyleSheetHandler class, I must have missed it or just didn’t remember it!

[Isomorphic]

Actually, Claudio, it looks like there may be something a bit deeper here, and the stateful class still isn't applied properly.

We'll look into that but, for the moment, you can make it work by setting the cssClass in your src-strings, like:

icon: "Edit:cssClass:myIcon;"

Of course, if you want these icons to have the same color-scheme as regular icons, you can use the builtin cssClass:icon for that.

[Isomorphic]

hi Claudio - this one's been fixed for tomorrow's builds, dated July 24 and later.

Assuming you want these buttons to have the builtin "icon" style, which is intended for use on the app's standard background-color:

// set iconStyle on RibbonButton
isc.RibbonButton.addProperties({ iconStyle: "icon" });

icon: "Edit"

// or, set cssClass in src-strings
icon: "Edit:cssClass:icon;"

[claudiobosticco]

I see it's fixed, thank you very much.