Announcement

**Isomorphic** · 4 Jan 2026, 00:12

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

**pH4Lk0n** · 5 Jan 2026, 06:38

I confirm it's fixed. Thank you.

**pH4Lk0n** · 5 Jan 2026, 06:46

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** · 5 Jan 2026, 10:12

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** · 5 Jan 2026, 13:57

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

**pH4Lk0n** · 8 Jan 2026, 04:09

I've found another bug with fontIcon and Button :(

After Button is drawn icon value does not change when calling setIcon() but styles are still applied. Probably value is not handled.
Ex.:

Code:

buttonSubmit.setIcon("font:cssClass:fontIcon;value:&amp;#xea67;;color:#3a8830;");

When I call this on some action after button is displayed, color style is applied but value stays like before.

Even stranger effect is when calling setIcon() with simple png icon (when fontIcon was showed from the beginning). In this case old font icon is visible as value hasn't changed and as addition new icon is set as background-image not as IMG when png icon is used from the start.

When first icon is a png image, IMG tag is created and when I try to set fontIcon, SPAN tag is not there so IMG gets src as null.

So right now it looks like changing between image and font icon is not supported.
But if you could fix at least fix changing value it would be great.

Tested on latest build from 2026-01-07

Also when setting Button to disabled mode, fontIcon class is changed to fontIconDisabled - even when I force iconBaseStyle to null on theme js:

Code:

isc.Button.addProperties({
  iconStyle: null,
  iconBaseStyle: null,
});

It worked only after changing:

Code:

buttonSubmit.setShowDisabledIcon(false);

Best regards

**Isomorphic** · 16 Jan 2026, 06:45

We've made some changes to address these and other issues with font-icons - going forward, you should use the format "sprite:font:" instead of just "font:" (the framework will make that change anyway, if you use just "font:"), and you can refer to the docs for SVG Symbol sprites to determine the generally available properties. For font-icons, you should now use "font-size" to affect the image size, and "size" is non-functional (as is "rotate").

However, note that this remains an undocumented subsystem and we generally consider SVG symbols to be better. If you come across more issues with font-icons, we'd welcome you pointing out the diffs that need to be applied; otherwise, we probably will shortly need to return to working on bugs in documented systems.

On your point about switching between image-formats like .png and non-images, like SVG symbols or font-icons, the HTML structures differ in these cases - the fix is to redraw() the button after calling setIcon(). We've added an optional "redraw" param to StatefulCanvas.setIcon() and Img.setSrc(), which you can pass to cause the redraw automatically in these cases. If you hit any other cases where icons don't update properly after changing them, redraw() the widget.

On your final point about the Disabled state - setting iconStyle and iconBaseStyle to null on Button doesn't do anything (the former is already null and the latter doesn't exist), and you show the class changing to "fontIconDisabled" anyway, which is a state of your own "fontIcon" class, not a builtin one. Since the default value of Button.showDisabledIcon is true, yes, you do need to set it to false if you don't want a disabled icon state. Or, you could add the fontIconDisabled class in your CSS, if you do want that state.

Otherwise, this behavior is correct.

**pH4Lk0n** · 19 Jan 2026, 11:06

In latest version 2026-01-10 "sprite:font:" is not yet working so I will wait to release of newer version to test this.
Best regards

**pH4Lk0n** · 21 Jan 2026, 10:34

Hello,
I've tested on 2026-01-26 and now value is changing but when manual change of with setIcon on Button
but any other action messes structure.
Take a look of these screenshots:

First one shows a button with font icon and it's created by 3 span tags and browser show normal icon.

And it looks good:

But when mouse goes over a button - without any manual action and I've even tried to disable hover - whole structure is changing to 1 span only and value is not treated as html code but like encoded value.

and it looks like this:

Also tried to change src to "sprite:font" format but effect is the same.
So I guess there are 2 problems:
1. Why the structure is changing from 3 spans to only one after hover - it stays that way after hover state is over and never goes back to 3 spans state.
2. Why value is treated properly on init and after any state change value is encoded to display html characters.

Best regards

**Isomorphic** · 2026-01-22T12:59:42

It's true that the HTML structure can change, and we'll probably take a look at that - but it isn't the cause of any issues here.

If you see the glyph-key displayed as text, it's because the CSS class being applied doesn't set the right font-family - or the class isn't defined. We don't see this in any circumstance with our internal mappings for material-icons.

You said that this happens even if you set showRollOverIcon to false, but that seems unlikely - in testing, mouseOver with showRollOverIcon set to true changes the class to "fontIconOver", and would indeed result in the glyph showing as text if you haven't got a class called "fontIconOver". But showRollOverIcon false does not make that change, and would not cause the HTML to change in a way that would show the glyph-key as text.

In your case, the problem is almost certainly that you don't have stateful styles defined for your fontIcon class.

Most likely, you just need to list the framework states along with your regular fontIcon selector:

Code:

/* give all states the right font-family and a default color, for example */
.fontIcon,
.fontIconOver,
.fontIconDown,
.fontIconFocused,
.fontIconFocusedOver,
.fontIconDisabled {
...
}

/* tweak some states as you see fit */
.fontIconDisabled {
...
}

We would expect this to address any issues with glyph-keys being visible as text.

If it doesn't, please show your CSS and a runnable sample.

**pH4Lk0n** · 2026-01-22T17:53:58

No, it's not the matter of style class. In both cases class is proper as "fontIcon". But in first example value is treated properly as HTML entity and in the second one as plain text.

Simple example. You don't even need to load any CSS icons.

Code:

        VLayout vLayout = new VLayout(10);
        vLayout.setWidth(440);
        vLayout.setHeight(100);
        vLayout.setDefaultLayoutAlign(VerticalAlignment.CENTER);

        IButton button = new IButton("Test");
        button.setIcon("sprite:font:cssClass:fontIcon;value:&#xea67;;color:#3a8830;");
        vLayout.addMember(button);

        this.addChild(vLayout);

After this button is shown we have something like this:

And as you can see icon is shown as HTML Entity and if you add into CSS:

Code:

@font-face {
    font-family: "tabler-icons";
    src: url("https://cdnjs.cloudflare.com/ajax/libs/tabler-icons/3.35.0/fonts/tabler-icons-200.woff2") format("woff2");
}

.fontIcon {
    font-family: 'tabler-icons';
    font-weight: bold;
    font-size: 16px;
}

you will see:

And then just move mouse over this button and away - so it should go back to normal state.
Then you will see HTML structure changed and value is not HTML entity any more but is treated as safe text.

See that in both cases class is properly set to fontIcon but value is a problem.

Now when I call from JS console:

Code:

document.getElementById("isc_2Gicon").innerHTML = "&#xea67;";

Of course adjusting element ID the icon will show up again.
And when I call:

Code:

document.getElementById("isc_2Gicon").textContent = "&#xea67;";

the text shows up again.

So maybe in one method that is generating the code innerHTML i used and when it's changed textContent is used?

This was tested with basic Enterprise theme without any modifications.
Hope that explains a problem.
Best regards

**Isomorphic** · 2026-01-22T18:47:59

Ah, ok. The difference we were seeing is that, as well as Unicode codepoints, the Material Icons font also supports classic text ligatures (icon names), which are substituted by the font itself and therefore work when assigned via textContent.

Tabler’s webfont does not define ligatures. When used directly (without Tabler’s CSS icon classes), it relies only on Unicode codepoints. If those codepoints are injected as HTML entities, they require HTML parsing (a change to innerHTML) - if you inject them as actual Unicode characters, textContent works as well.

So, in this case, use the actual Unicode character rather than an HTML entity — for example "\uEA67" instead of "" — and it will work.

We've also made a change to prevent the HTML structure from changing, although it shouldn't affect your situation here either way.

**pH4Lk0n** · 2026-01-22T20:35:47

Ok. When I changed to "\u..." representation it's working. Thank you.

Best regards

**Isomorphic** · 2026-01-23T06:32:17

Following up - we've corrected a few things:

1) switched (back) to setting innerHTML in this flow, to restore more complete support across different 3rd party fonts - your original HTML codepoints will work again now

2) tweaked so the HTML structure isn't modified by state changes

3) fixed so that mouse-interactions with the image apply the stateful CSS class to the correct element (the inner one) - this means that your icon *will* now disappear if your button has showRollOverIcon set to true and you have not provided the Over state for your fontIcon class.

We strongly recommend that you add those additional selectors to avoid this potential issue in various use-cases (not just buttons).

You can try these changes out in today's builds, dated January 23, and later ones.

Announcement

Button iconSpacing is ignored when using font icon

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment