Picture elements icon resizing

Configuration Frontend
1

I need that all icons inside a picture-element card resize according to the width of the window or the image. This is my solution so far:

- type: state-icon
  tap_action:
    action: toggle
  entity: media_player.lg_oled
  style:
    background: rgba(255, 255, 255, 1)
    border-radius: 25px
    padding: 1px
    top: 68%
    left: 59%
    '--paper-item-icon-color': black
    '--mdc-icon-size': 60%
    display: flex
    width: 2.2%
    height: 3.3%

This creates a TV icon perfectly centered inside a white circle (in my PC monitor). The only issue so far is that when I resize the window, the icon starts to offset in the vertical axis from the center of the circle.

I don’t know why and where to go from here.

2
3

Great thread! It, however, doesn’t mention sizing items responsively, I think.

For now adding align-items: center along with display: flex fixes it for me.