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!

39

did someone found a way to scale icon together with the image size? For example when looking at same page on PC, phone, tablet, so that the ratio between icon size and picture stays the same?

40

I finally got it working! This took a long time and a lot of troubleshooting, as several issues required creative workarounds.

Important: Responsive styles do not appear correctly in the editor’s live preview. You must save and view the card on the actual dashboard.

- entity: input_boolean.vacuum_room1
    type: state-icon
    icon: mdi:robot-vacuum
    state_color: true
    style:
      # --- Base Positioning and Appearance ---
      left: 24.5%
      top: 80%
      transform: translate(-50%, -50%)
      background-color: rgba(255, 255, 255, 0.2)
      border-radius: 50%
      "--paper-item-icon-color": white
      "--paper-item-icon-active-color": orange

      # 1. Responsive Icon Size.
      #    Makes the icon scale with screen size. The clamp() function
      #    prevents it from becoming too small on phones or too large on desktops.
      #    With only a *vw* value, the iconsize got too small on small screen. 
      #    My settings here will make it a bit bigger on small screens than relative
      #    on big screen, so it's easier to press. Needs individual tinkering I guess.
      "--mdc-icon-size": clamp(40px, 5.2vw, 70px)

      # 2. Responsive Background Padding.
      #    Fixes the background circle, which became disproportional to the
      #    icon (too thick on phones, too thin on desktops).
      padding: clamp(0px, 0.1vw, 12px)

      # 3. Icon Centering Fix.
      #    The responsive styles above caused the icon to become off-center.
      #    This block forces the container to shrink-wrap the icon (width/height)
      #    and then flexbox perfectly centers it.
      width: var(--mdc-icon-size)
      height: var(--mdc-icon-size)
      display: flex
      align-items: center
      justify-content: center

      # 4. Final Alignment Nudge.
      #    Corrects the last pixel of vertical misalignment on mobile devices.
      line-height: 1

What a work, but I’m happy now :slightly_smiling_face: