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)
22 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 
2 Likes
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
Two other people asked the same question. Go tell them Mr helpful.
1 Like
I didn’t see the thread before Hence why I’m telling you how the forum works. You’re pretty grumpy, take a chill pill.
1 Like
I am also still curious about the solution. Till now there isn’t one I think. On my tablet it looks realy nice. On my phone it looks terrible.
Create other dashboard for your tablet?
This work for me perfectly, by just setting the scale alone, it affects the position of icon.
By using translate -50%, the scaling is done from the center of icon, and hence does not affect the icon position in the picture.
The “–iron-icon…” does not work for me.
Does anyone know how to rotate an icon like 180degree? Please advice…Thanks
1 Like
Got it, this is what I did
transform: ‘translate(-50%,-50%) scale(1.5,1.5) rotate(90deg)’
2 Likes