Help: Want to change Lovelace picture element icon size

Configuration Frontend
21

Two other people asked the same question. Go tell them Mr helpful.

1 Like
22

I didn’t see the thread before :wink: Hence why I’m telling you how the forum works. You’re pretty grumpy, take a chill pill.

1 Like
23

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.

24

Create other dashboard for your tablet?

25

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
26

Got it, this is what I did

transform: ‘translate(-50%,-50%) scale(1.5,1.5) rotate(90deg)’

2 Likes
27

I tried to use this method, but to no avail:

entities:
  - entity: light.dimmable_light_8
    name: Kitchen1
    icon: 'mdi:history'
    style:
      transform: 'translate(-50%, -50%) scale(3.5, 3.5)'
    tap_action:
      action: toggle

Any idea what’s wrong? All I want to do is to scale up the entity icon.

28

Since this is the most advanced topic in picture elements card sizing I would like to know how I can size the background image in panel mode. The picture is too big and does not properly display in several devices (even on a 4K screen). Where and what do I need to go to get the right information on “sizing” the background picture?

29

this worked for me

30

For those like me who are still having trouble with icon sizes, use --mdc-icon-size in your style.

3 Likes
31

Thank you, this worked for me! for example:

style:
  top: 1%
  left: 1%
  --mdc-icon-size: 150px
3 Likes
32

Thanks.
This worked for me.

33

I am having this issue where the icons in a picture-elements card have a different size depending on device/resolution (i.e. bigger icons in phone than in pc) and --mdc-icon-size didn´t do the trick for me (I can change the size of the icons with mdc-icon-size but the difference between phone and pc stays), any idea why?

34

I have to think that you are only seeing the difference in relative size between the two displays and resolutions. A pixel is a pixel, but a pixel on a 4K monitor is a lot physically smaller than one on a 720p display, for example, so the two aren’t necessarily going to look similar when compared side-by-side.

You could consider trying card modifiers like the ones linked below. These can allow you to specify different sizes depending on other conditions.

35

You are totally right, I´m not sure how I missed the fact that the icon sizes are defined in pixels, and what I would need is somehow define their sizes in % of the window size (similar to how the sizes of the images within picture-elements are defined)

1 Like
37

Thank you that work fine.

38

Awesome, this worked for me too. Thank you!