More space between icon and Primary tekst in custom:mushroom-template-card

Configuration Frontend
1

Hi,

I would like to have a bit more space between the icon on the button and the primary text. I have tried everything but unfortunately I or chatgpt can’t seem to get this to work. Does anyone know a solution?

Firefox_Screenshot_2025-04-23T22-57-54.135Z
Firefox_Screenshot_2025-04-23T22-57-54.135Z762×810 33.8 KB

This is my current code:

type: custom:mushroom-template-card
primary: Woonkamer
icon: mdi:sofa
layout: vertical
grid_options:
  columns: 4
  rows: 2
secondary: ""
tap_action:
  action: navigate
  navigation_path: /db-mobiel2025/woonkamer
hold_action:
  action: none
double_tap_action:
  action: none
badge_icon: |
  {% if is_state('light.woonkamer_tellen', 'on') %}
    mdi:lightbulb
  {% else %}
    mdi:lightbulb-off
  {% endif %}
badge_color: |
  {% if is_state('light.woonkamer_tellen', 'on') %}
    green
  {% else %}
    black
  {% endif %}
card_mod:
  style: |
    :host {

    }
    ha-state-icon {
      --mdc-icon-size: 64px !important;
    }
    mushroom-shape-icon {
      --shape-color: transparent !important;
      --shape-color-disabled: transparent !important;
    } 
    mushroom-badge-icon {
      margin-right: -30px;
      margin-top: -15px;
      --badge-icon-size: 20px;
      --badge-size: 30px;
    }
2

Try doing it by yourself.
Select the card in Code inspector and find a name of that “text label” element. Then set “margin-top: something” in Code Inspector for that “text label” element. If it gives a desired result - then you will need to define same in card-mod (which is much less difficult part o the work).