Button iconSpacing is ignored when using font icon

[pH4Lk0n]

Hello,

I've come across a bug with font icons on Button.
When switching between image icon and font icon iconSpacing setting is ignored on display. It's still in use when calculating for example text overflow but spacing is not visible.
I've found in code that with classic IMG there is margin-right added to IMG styles but with font icon there is no such settings added to SPAN tag.

_generateIconImgHTML method in Button.js ignores all imgParams when font icon is detected.

On the other side ToolStripButton uses separate table cell to icon and adds padding to this cell so it works fine.

Probably adding support to extraCSSText when font icon is detected would solve this issue.

I've also tested on latest nightly 14.1p 2025-12-31.

Best regards

[Isomorphic]

Thanks for the report - this has been fixed back to 13.1 for builds dated January 5 and later.

[pH4Lk0n]

I confirm it's fixed. Thank you.

[pH4Lk0n]

Ok but this changed also much more, because now all parameters that was applied to IMG is also applied to SPAN and that's probably desired.

But class name is also changed. By default class name to SPAN is "fontIcon" but on any action (like hover) it's changed to just "icon".
I think class name should not be changed because it loses font-family and other settings.

[Isomorphic]

The change to support more settings in this case was indeed intended, and a similar change was made in isc.Img.

Assuming we're still talking about isc.Button, the only way the style would change like this is if Button.iconStyle was set to "icon" - that *is* the name of the builtin CSS class for icons in our skins, but Button.iconStyle is unset by default. It shouldn't override cssClass in a src-string anyway, so that's a bug and we'll fix it - but, for now, if Button.iconStyle is set to "icon", just clear it.

If not or you're talking about a widget other than Button, please show code.

Finally It isn't really clear how you're using font-icons - we don't seem to have any of our direct support documented publicly and we don't use font-icons in our own skins - but we do use SVG symbols and, for that reason, many widgets do provide an iconStyle or iconBaseStyle attribute that is set to "icon" by default, to provide stateful colors automatically.

[pH4Lk0n]

Sorry for mixing two things. As you said the problem I've faced was not in fact in Button but in NavigationButton created from NavigationBar.

And NavigationBar has default iconBaseStyle set to "icon" and that's the problem.
I've cleared it by clearing iconBaseStyle on NavigationBar, iconStyle on NavigationButton and finally setting false to showDownIcon.
When class will not be overridden it will be much simpler. :)

Some time ago I've found some code with material icons usage. Right now I'm creating prove of concept with Tabler icons - and so for now it looks promising.
I'm just setting src with something like this: "font:cssClass:fontIcon;value:;color:#3a8830;" and it works in most cases.

It also works with Media icons with something like that:
isc.Media.updateIconMapping('Close', 'font:cssClass:fontIcon;value:;');

Best regards