Help: Want to change Lovelace picture element icon size

So i’ve created a floorplan and added all my entities in the right places. I then created a panel. Now all my icons are supersmall.

I’ve tried playing around with the css, width and and height, but they don’t really change the size of the icon, but instead just change the size of the parent -tag, while the icon inside remains the same size.

Am I doing something wrong or is lovelace not behaving correctly?

When I do this:

elements:
  - type: state-icon
    entity: light.koket
    tap_action: toggle
    style:
      top: 27%
      left: 34%
      width: 100px
      height: 100px

I get this:

<state-badge class="clickable element" title="Köket: På" style="top: 27%; left: 34%; width: 100px; height: 100px; display: inline-block; vertical-align: middle; background-size: contain; background-position: center center;"></state-badge>

But the Icon remains tiny. Help?

1 Like

did you get around this? i’m intrested too

No success so far. :frowning:

The CSS just doesn’t seem to apply to the icon but only the parent. Someone with better programming skills might have an answer, but I’m drawing a blank.

This seems to work:

              - type: state-icon
                entity: light.living_room_fan
                tap_action: toggle
                style:
                  left: 39%          
                  top:  63%
                  --iron-icon-height: 60px
                  --iron-icon-width: 60px
2 Likes

Oh, will have to try that :slight_smile:

Tried it now, and it works just perfectly. :slight_smile:

Seems to be small issue with the ChromeCast icon not changing size when it is actually playing something. Instead it just shows the small icon with whatever is playing. Not playing anything it seems to show the correct size.

just found this way:

style:
    transform: scale(2,2)
21 Likes

Notice that the icon sizes are twice the size (proportionally) on iPhone as in Win10 Firefox and Edge.

Hi,
I’m trying to set the icon size proportionally to its parent but no success so far…
The transform: scale(2,2) doubles the size of the icon independently of its parent

Thats why my css parameters are working for my 1080p 24" pc screen but the icons are far too large on my smartphone with a different definition.
On the contrary the location with “top” and “left” expressed in percentages are still fine whatever the screen definition…

Could you give us a little more information? An example?

Yes, this is the code i use in a picture element to display the main door of my house :

    cards:
      - elements:
          - entity: binary_sensor.door_window_sensor_158d0003036c04
            icon: 'mdi:door'
            style:
              '--paper-item-icon-active-color': '#2581ab'
              '--paper-item-icon-color': darkgrey
              left: 48%
              title: Entrée
              top: 93%
              transform: 'translate(-50%, -50%) scale(3.5, 3.5)'
            type: state-icon

In this example the door icon is located at 48% of the picture element width card and 93% of the height.
The location of this icon does not change on my smartphone or on my PC.

If i do not use the transform style, the icon width and height seem to be the sames numbers of pixels on the two screens which have not the same definition (not even the same aspect ratio, the smartphone is wilder than 16/9).
If i use the scale option it applies to these numbers of pixels so the problem remains.

In CSS, the width and height attributes can be set to parent size percentage to avoid this issue but in home assistant the width and height attributes do not apply correctly to the icons and so i failed to configure a true responsive hmi.

The best way to test it is simply to resize the browser window.
Fullscreen : all is fine
Reduced by 50% : the floorplan is reduced to fill the new browser window size, the icon location is still fine but the icon size remains the same as it was in full screen (so twice the size it should be).

4 Likes

You ever figure out a fix for the icons not resizing with parent? I’ve tried the --iron-icon-width: code with px, em, vw, and %, but none of them allow the icon size to scale with the window size.

For “type: image” elements, using “width: 50%” will scale, so the image is smaller on smaller screens.

2 Likes

Does anyone handle that ? I am thinking of use image instead and make some PNG transparent icon and it should be fine without other workaround. But still if someone find a way to make responsive icons let me know please. In my case I don’t need to indicate state beacuse I am doing it by showing other image in floorplan but in the future it could be different. Thanks in advance.

BUMP the topic-----!

what are you bumping for, there is a solution. Read the thread.

"You ever figure out a fix for the icons not resizing with parent? I’ve tried the --iron-icon-width: code with px, em, vw, and %, but none of them allow the icon size to scale with the window size.

For “type: image” elements, using “width: 50%” will scale, so the image is smaller on smaller screens."

From above. This is NOT resolved as the provided options are inadequate for basic multi screen use cases.

Is not remotely adequate. I read the thread :wink:

1 Like

That’s not the original question of the thread though. You’re better off creating a new post instead of bumping one with a completely different question. Thread posting 101.

2 Likes

Save it dude. You’re nit picking. A solution to the question originally asked should include one that works in most cases. That won’t work for anyone using more than one hardware interface. If you don’t like it, I don’t care.

1 Like

Just trying to get you help… whatever floats your boat. Doesn’t piss me off, just trying to guide you to the correct area.

1 Like