Strange icon dimension after updating to HA 0.109.0b0

Checklist

• I updated the card to the latest (stable) version available
• I cleared the cache of my browser

Describe the bug Since I upgraded to HA 0.109.0b0 the icons in some of my custom button card behave strangely. I use the state of the button to display a timer. When the timer is active the font is 9px and when the timer is idle the font is 0px. The icon dimension used to adapt, so in HA 0.108.8 I had

respectively when the timer is off and on In 0.109.0b0 I have this:

because the icon remains the same (too tiny) dimension.

Version of the card Version: 3.2.3

To Reproduce This is the configuration I used:

              - type: custom:button-card
                entity: timer.taverna
                icon: mdi:lightbulb
                name: taverna
                tap_action: 
                  action: call-service
                  service: light.toggle
                  service_data:
                    entity_id: light.luce_taverna
                hold_action: 
                  action: call-service
                  service: automation.toggle
                  service_data:
                    entity_id: automation.luce_taverna_spegni_su_fine_timer
                show_state: true
                show_name: true
                show_icon: true
                color_type: icon

                styles:
                  img_cell:
                    - justify-content: middle
                    - align-items: middle
                    - margin: none 
                  state:
                    - font-size: >
                          [[[
                             if (states['timer.taverna'].state == 'idle')
                              return "0px";
                             else
                              return "9px";
                          ]]]

                  card:
                  - height: 64px
                  icon:
                    - color: >
                          [[[
                             if (states['light.luce_taverna'].state == 'on')
                              return "var(--paper-item-icon-active-color)";
                             return "var(--paper-item-icon-color)";
                          ]]]
                  grid:
                    - position: relative
                    - grid-template-areas: '"i" "s" "n" "l"'

Desktop (please complete the following information):

• Browser [e.g. chrome, safari]: chrome
• Version [e.g. 22] latest

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]: Iphone 8
• OS: [e.g. iOS8.1] iOS 13.4
• Browser [e.g. stock browser, safari] chrome and safari
• Version [e.g. 22] latest

[ArkadiuszNiemiec]

I have just updated to 0.110.* and have similar problem. My icons are now way smaller and not vertically centred:

                        - type: 'custom:button-card'
                          entity: switch.kitchen_wall_right # button kitchen
                          icon: 'mdi:stove'
                          show_icon: true
                          show_name: false
                          state:
                            - styles:
                                icon:
                                  - color: 'var(--paper-item-icon-active-color)  '
                              value: 'on'
                          styles:
                            card:
                              - height: 70px
                              - border-radius: 4px
                              - background-color: var(--primary-background-color)
                            icon:
                              - width: 80%
                              - color: var(--primary-text-color)
                          tap_action:
                            action: toggle
                            haptic: light
                          hold_action:
                            action: more-info

The height in icon style normally set the icon size, and they were centred by default. I have found that the ha-svg-icon element has these properties:

width: var(--mdc-icon-size, 24px);
height: var(--mdc-icon-size, 24px);

But what about centring? @RomRider can you please check what they changed?

Edit: @RomRider this is how it looks on 0.109.6:

Edit2: 0.110.* is not stable yet. I will stick to stable release.

[mgiako]

Hi, the problem is back on HA 0.110.0b2. Have I to open a new issue?