State-icon vs icon styling

Configuration Frontend
1

Hi all,
I’d like to ask if there’s any difference in style definition between picture-elements’ state-icon and icon, or bug potentially? I’ve got the following code:

- image: /local/background.jpg
  type: picture-elements
  elements:
    - type: state-icon
      entity: sensor.ha_update
      style:
        '--iron-icon-width': 100px
        '--iron-icon-height': 100px
        top: 50%
        left: 50%
      tap_action: more-info
    - type: state-label
      entity: sensor.ha_update
      style:
        top: 90%
        left: 50%

As a result::
notok
which is obviously not OK.
However, when I change the code as follows, with the same style:

       - image: /local/background.jpg
          type: picture-elements
          elements:
            - type: icon
              icon: mdi:checkbox-marked-circle-outline
              style:
                '--iron-icon-width': 100px
                '--iron-icon-height': 100px
                top: 50%
                left: 50%
              tap_action: more-info
            - type: state-label
              entity: sensor.ha_update
              style:
                top: 90%
                left: 50%

I’m getting centered icon, which is OK (as a new user I can only attach one picture in post).

Any ideas why? I would like to use state-icon which is following the sensor template state icon change.

2

The calculation for size may not happen on the fly so it defaults to the upper left corner of the image. Just use 25% and 25% and it should work.

Is it a bug? Maybe. It could be by design, it could be a bug. If you want it fixed, write up the issue. If you just want a working card, use 25% and 25% assuming that the size of your card is 200px x 200px.

3

Thank you for the reply. Well actually I had had the idea of 25% 25% and other calculations and it kinda helps under certain circumstances, but do not solve the issue for all use cases. For example, if I have a centered state-icon on the card on computer, it drifts left and top on mobile phone. The other interesting thing is that if I remove iron-icon-width and iron-icon-height, the icon is properly centered on all devices but too small.

4

Then this appears to be an issue with the calculation when a style that adjusts icon size is applied.

5

So should I open an issue on github for lovelace picture-elements card in your opinion?

6

I would say so. Also, if you want to get around this, there are plenty of custom cards that do what you are doing. For example, the custom:button-card would handle this.

7

OK, thanks for your help. I am using button-card as well but we’ll see what developers say on the issue. I prefer to use build-in features over the add-ons when possible.