--mdc-icon-size doesn't show the correct size when switches between vertical mode and horizontal mode with decluttering-card template.

[horacecar]

Checklist:

• [x] I updated to the latest version available
• [x] I cleared the cache of my browser

Release with the issue: HA: 0.111.2 IOS 13.4 --mdc-icon-size: 90%

--mdc-icon-size doesn't show the correct size when switches between vertical mode and horizontal mode with decluttering-card template, it will show the mdi icon bigger than the background button when my phone / tablet is vertical , but the size is right if my phone / tablet is horizontal. If i just use --mdc-icon-size in lovelace , it will fine. showing the correct size only 90% of the background button both vertical mode and horizontal mode on my tablet and iphone.

in nomally lovelace `

element:
  entity: light.test_light
  style:
    **'--mdc-icon-size': 90%**
    align-items: center
    background-color: 'rgba(255, 255, 255, 0.4)'
    border-radius: 40%
    display: flex
    height: 4vw
    justify-content: center
    left: 43%
    top: 93%
    width: 4vw
  tap_action:
    action: toggle
  type: state-icon`

in decluttering-card template `

element:
  entity: '[[entity]]'
  style:
    **'--mdc-icon-size': 90%**
    align-items: center
    background-color: 'rgba(255, 255, 255, 0.4)'
    border-radius: 40%
    display: flex
    height: '[[height]]'
    justify-content: center
    left: '[[left]]'
    top: '[[top]]'
    width: '[[width]]'
    font-size: 40px
  tap_action:
    action: toggle
  type: state-icon `

Last working release (if known):

Browser and Operating System:

Javascript errors shown in the web inspector (if applicable):

Additional information: