State Icon in Picture Element behave weirdly

Hi All.

I have just created my first 3D floor plan card learning from all of you, thanks a lot.

Everything worked except the icon will look like hold after only a single click.
I have clear the cache and tested it in Chrome, Edge, Firefox and the issue still exists.

Here is the code for the icon. Many thanks

  - type: state-icon
    entity: light.garden_3
    style:
      left: 37%
      top: 20%
      '--iron-icon-height': 1.7vw
      '--iron-icon-width': 1.7vw
      '--paper-item-icon-active-color': '#000000'
      '--paper-item-icon-color': darkgrey
      align-items: center
      background-color: '#FFFFFF'
      border-radius: 100%
      box-shadow: '0px 0px 28px 0px rgba(0,0,0,0.39)'
      display: flex
      height: 3vw
      justify-content: center
      margin-left: '-1.5vw'
      margin-top: '-1.5vw'
      transform: scale(0.6)
      width: 3vw
    tap_action:
      action: toggle