Sizing Component-Embedded Icons Using "%" Instead of "px"

Ignition
,
1

Hello,

I am trying to develop an interface in perspective that is truly dynamic in regards to the screen/viewport size of the viewing device/window. To clarify: Dynamically scaling base components to different and/or actively changing screen resolutions is simple enough using flex containers (or even % coordinate containers), but getting the embedded text elements to scale the same way has been an entirely different challenge.

I'll spare you the ear-beating of how I got the text-scaling to work decently well; My current problem is getting icons--specifically those embedded into other base components--to scale nicely and dynamically like the other elements on the page (including the button itself).

Specifically, I have a simple button component with both a text label and an icon defined within its component properties. Now, I can use my dynamic font-scaling trick to get the button text to scale up/down proportionally with changing screen/viewport dimensions, but I noticed that the embedded icon's width and height properties will only accept unitless integers for their respective values (those integer numbers representing fixed pixels; see screenshots #1 and #2 below). Because of this, if the screen size changes, all of the graphical elements on the screen will scale up/down proportionally except for the button's icon, which remains at a fixed "_px by _px" size despite the changing size of the button itself.

1-icon-sizing-pixels
1-icon-sizing-pixels1511×776 76.8 KB

2-icon-sizing-pct
2-icon-sizing-pct1541×832 102 KB

Here's where it gets interesting (and confusing): If I try to set a percentage value for the embedded icon's width and height properties, I get an error that reads "string found, number expected" (see screenshot #2 above). However, if I ignore this error/warning message, the icon actually does scale in size dynamically precisely the way I want/expect it to...

Refer to screenshots #3 and #4 below to see what I mean. In both screenshots, the top button (labeled "SETPOINTS") is using "invalid" %-based values for the icon's width and height properties (and thus are currently throwing errors/warnings in my designer), while the bottom button (labeled "METRICS") is using fixed integer values for the icon's dimensions (as seemingly intended). Screenshot #3 shows what both buttons look like when the interface is displayed on the "base" screen/viewport resolution that the interface was designed around. Both icons look fine, because their fixed properties were designed with this specific resolution in mind. In screenshot #4, you can see what happens to each button's icon when the viewport is shrunk down significantly. As expected, the "METRICS" button icon looks way too big for the rest of the button, since its pixel-by-pixel real estate did not shrink with the viewport resolution. However, and more interestingly, the "SETPOINTS" button icon does actually scale down proportionally with the other components/elements. This is exactly what I am aiming to accomplish, just ideally without throwing errors/warning in my designer!

3-icon-sizing-demo-normal
3-icon-sizing-demo-normal1036×425 32.8 KB

4-icon-sizing-demo-small
4-icon-sizing-demo-small508×211 14.5 KB

So, a few questions:

  1. Do the above-referenced "width" and "height" properties for embedded icons really only support fixed integer values ("pixels"), as my designer is indicating? Or am I perhaps seeing some sort of "vestigial guardrail" that was accidentally carried over from a version of Ignition that didn't support % values for these properties?
  2. Would it be a bad practice to use % values for these icon properties, despite the designer's warnings, since doing so results in the functionality I am seeking?
  3. If % values are fine to use for these properties, is there any way I can disable the associated warnings in the Ignition Designer?
  4. If using % values is not recommended, is there any alternative method I can use to dynamically scale the size of a button's embedded icon? I was flirting with the idea of using "page.props.dimensions" properties in an equation to yield a pixel-by-pixel icon size that scales dynamically with screen or viewport dimensions, but that seems like it could get real messy real quick...

Any input/feedback is greatly appreciated :slightly_smiling_face:

2

Whatever value you set is going to emitted verbatim into the DOM, so look in the browser devtools to confirm, but it doesn't surprise me that this 'just works'.
Answering #2, the only case where this would get you into trouble is if you've set the button's image.position to center, because then we do rely on the value being integer pixels:

  if (image.position === 'center' && textNotEmpty) {
    const imgHeight =
      image.height != null ? image.height : imageDefaults.height!;
    const imgWidth = image.width != null ? image.width : imageDefaults.width!;
    return {
      ...baseImageStyle,
      position: 'absolute',
      top: `calc(50% - ${imgHeight / 2}px)`,
      left: `calc(50% - ${imgWidth / 2}px)`,
      zIndex: 19,
    };

As for #3, no - you either have to change the values or live with it.

That said...I'd probably just live with it, myself :person_shrugging:
Workarounds may be possible using the stylesheet or whatever, but having the behavior be 'local' to the thing you're editing is pretty nice.