rux-monitoring-icon can't be resized

[run2xs]

We have a rux-monitoring-icon in our rux-global-status-bar and are refactoring our status bar to match the latest Astro guidelines (confirmed with Austin). The current rux-monitoring-icon won't fit nicely in the new design:

I am unable to find a way to resize a rux-monitoring-icon without doing something like this:

  ngAfterViewInit() {
    this.resizeIcon(0);
  }

  resizeIcon(attempts) {
    const ruxIcon = document.querySelector('#rmi').shadowRoot.querySelector('rux-icon');
    if (ruxIcon) {
      ruxIcon.size = '.8rem';
    } else if (attempts < 10) {
      setTimeout(() => {
        this.resizeIcon(attempts++);
      }, 10);
    }
  }

Unfortunately, that only changes the main icon, and the secondary icon is out of place and too big relative to the main one. Adding a part selector for the rux-icon wouldn't help because of this. I am unable to control the size or position of the secondary icon.

Could you please add a "size" attribute to the rux-monitoring-icon so we can control how big it is? Resizing the div containing the rux-monitoring-icon helps a little but that leads to other wonkiness.

[FMorrison87]

Thanks for bringing this to our attention! I am working with our design team to see if this is a possibility that we could develop. I will add an update here when I have one.

[FMorrison87]

Hi @run2xs, I conferred with design and at this time we are not currently planning to modify the monitoring icon to resize, due to legibility issues that would arise, but it may be considered in the future. I am going to convert this issue to a discussion and I will update it if anything comes down the pipe from design.