Misalignment and size difference between SVG icons

[claudiobosticco]

SmartClient Version: v13.1p_2025-06-26/AllModules Development Only (built 2025-06-26)

Hello, I’d like to ask if it’s possible to correct a slight misalignment between the text and the SVG icons visible in the preDefinedHilites sample:



I believe it's the same issue you can see with a test case like this:

isc.Label.create({
                contents: "foo bar " + isc.Canvas.imgHTML("Cancel", 17, 17),
                width: 1,
                wrap: false,
                height: 1,
                padding: 0,
                border: "1px solid blue",
                icon: "Cancel"
            })

In this case, there is both a misalignment and a difference in size between the two icons:

[Isomorphic]

hi Claudio - these aren't the same issue. The first one is to do with v-centering to content in a grid-cell. The second is because the Label is not tall enough for its own c0ntents. If you make it 22 or more, they'll align.

We'll take a look at both alignment issues, but note that we don't see the difference in size that you mentioned, either in a test or indeed in your image, where the icons are the same size ;) One of them is just 1px lower than the other. You specify 17x17 for one icon, and the other is sized to 17x17, assuming you are in Spacious mode.

We'll get back to you shortly.

[claudiobosticco]

Hi, sorry - you're right: the problem with the Label is that, without specifying a size, the icon on the right is 1px smaller (and I’m not sure how to reliably specify the size across different screen densities).
When a size is specified, the icon ends up sitting 1px lower.
But thanks for the heads-up about the Label height!

And yes, the screenshots were taken in Spacious mode.

[Isomorphic]

Technically, what you're seeing is that the left-hand icon is correctly v-centered in its parent, which is the button - but the icon on the right is v-centered in the text-element, which via its font is less tall than the icon itself, so that element is overflowing to accommodate the icon.

We'll have a look in the next few days and let you know when it's fixed.

[Isomorphic]

Quick note, Claudio - in general, any time you ask for an SVG and a size can't be determined, they'll get isc.Media.svgDefaultSize, which is 16px, matching the general default for icons in Dense mode in most skins.

However, in Shiva, Button.iconSize in particular is set to 14px by default, rather than 16 - there was a reason for this (our SVGs are fully cropped so look pretty big at 16x16 in Dense mode buttons) and we may need to rethink that, but that's why you see a difference here - a normal SVG icon, like your right-hand one, without a size specified will be 16x16->19x19, but button.icon in particular without a size specified will be 14x14->17x17.

If you set Button.iconSize to 16 in your skin, so it matches other icons and Media.svgDefaultSize, you'll likely see the button-alignment issue go away - but the icons might look a bit big!