Button-card: resizing icon when it's on the left

Configuration Frontend
1

Hi all

I’m learning to use button-card and i’m loving the customization options it provides.

In the default layout (icon on top), the size of the icon responds to styles/icon/width,height,etc.
But in layout: icon_name_state2nd the icon is very small and it doesn’t respond to any styles/icon directives i’ve tried.

Is there a trick i’m missing?

Thanks

Screenshot from 2024-12-23 11-43-14

          card:
            type: custom:button-card
            entity: sensor.grid_current_power
            icon: mdi:tower-beach
            name: "[[[ return states['sensor.grid_status'].state ]]]"
            layout: icon_name_state2nd
            show_state: true
            styles:
              card:
                - height: 100px
             icon:
               - padding: 0   # none of these work
               - margin: 0    # none of these work
               - width: 80px  # none of these work
               - height: 80px # none of these work
2

try this

  type: custom:button-card
  entity: sensor.grid_current_power
  icon: mdi:tower-beach
  name: "[[[ return states['sensor.grid_status'].state ]]]"
  layout: icon_name_state2nd
  show_state: true
  styles:
    card:
      - height: 100px
    icon:
      - --mdc-icon-size: 40px # Adjust size as needed
3

Thanks. I tried that, but it didn’t change anything.