Icon size custom:mushroom-template-card

I have 3 problems with this code :frowning:

1 icon is only bigger when it is active, I would like the icon to always be bigger.
2 I would like the primary text to be lower
3 I would also like the badge icon to be a bit bigger so that it is readable

unfortunately I can’t get any of the 3 to work. Anyone who wants to / can help me further?


type: custom:mushroom-template-card
primary: Woonkamer
icon: mdi:sofa
layout: vertical
grid_options:
  columns: 4
  rows: 2
badge_icon: >
  {% set number_woonkamer_tellen_aantal=states("sensor.woonkamer_tellen_aantal")
  | int %}

  {% if number_woonkamer_tellen_aantal > 9 %}

  mdi:numeric-9-plus

  {% elif number_woonkamer_tellen_aantal > 0 and number_woonkamer_tellen_aantal
  < 10 %}

  mdi:numeric-{{number_woonkamer_tellen_aantal}}

  {% endif %}
badge_color: green
secondary: ""
tap_action:
  action: navigate
  navigation_path: /db-mobiel2025/woonkamer
hold_action:
  action: none
double_tap_action:
  action: none
card_mod:
  style: |
    :host {
      {% if states('sensor.woonkamer_tellen_aantal') | int >= 1 %}
      --ha-card-background: #223448;
      {% endif %}
    }
    ha-state-icon {
      --mdc-icon-size: 64px !important;
    }
    mushroom-template-card .primary {
      margin-top: 20px !important;  # Verschuift de primaire tekst naar beneden
    }
    .badge {
      font-size: 36px !important;  # Verhoogt de grootte van het badge-icoon
    }

problem 1 and 3 solved