Peut-on faire un badge avec une icone qui contient aussi un badge?

Entraide Home Assistant
1

Bonjour,

Mon problème

Voici mon Dashboard actuellement

image
image1040×1000 104 KB

Il est divisé en deux parties :

  1. Le menu du haut ce sont des badges
  2. Chaque section est une carte à base de button-card qui contient des chip-card inclus pour des actions rapides (maximum 4 par souci de place)

Je voudrais pouvoir remplacer les badge de la première ligne qui sont à base de mushroom-template-badge car je ne peux pas insérer du badge dans l’icone.
Pour être plus clair encore, je voudrais remplacer ce visuel
image
par ce visuel

image
image176×126 919 Bytes

Je pense que ce n’est pas possible car uniquement la carte de type « mushroom-template-card » n’est pas possible dans la section des badges. Vous confirmez ?

Ma configuration

System Information

version core-2025.12.2
installation_type Home Assistant OS
dev false
hassio true
docker true
container_arch aarch64
user root
virtualenv false
python_version 3.13.9
os_name Linux
os_version 6.12.47-haos-raspi
arch aarch64
timezone Europe/Paris
config_dir /config
Home Assistant Community Store
GitHub API ok
GitHub Content ok
GitHub Web ok
HACS Data ok
GitHub API Calls Remaining 5000
Installed Version 2.0.5
Stage running
Available Repositories 2559
Downloaded Repositories 20
Solcast Solar
can_reach_server ok
Home Assistant Cloud
logged_in false
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Home Assistant Supervisor
host_os Home Assistant OS 16.3
update_channel stable
supervisor_version supervisor-2026.01.0
agent_version 1.7.2
docker_version 28.3.3
disk_total 457.7 GB
disk_used 14.6 GB
nameservers 2a01:e0a:b15:4612::, 192.168.2.1
healthy true
supported true
host_connectivity true
supervisor_connectivity true
ntp_synchronized true
virtualization
board rpi4-64
supervisor_api ok
version_api ok
installed_addons File editor (5.8.0), Samba share (12.5.4), Duck DNS (1.26.0), Node-RED (20.2.4), Mosquitto broker (6.5.2), Advanced SSH & Web Terminal (22.0.3), Z-Wave JS (0.27.0), Zigbee2MQTT (2.7.1-1), MyElectricalData (0.13.2), SQLite Web (5.0.0)
Dashboards
dashboards 4
resources 30
views 26
mode storage
Network Configuration
adapters lo (disabled), end0 (enabled, default, auto), docker0 (disabled), hassio (disabled), vethe7f6637 (disabled), vethe1ca5ea (disabled), vethbe97517 (disabled), veth93ba3c7 (disabled), veth961a247 (disabled), veth1b9f065 (disabled), veth8887d55 (disabled), veth89d9f21 (disabled), veth63eb273 (disabled)
ipv4_addresses lo (127.0.0.1/8), end0 (192.168.2.240/24), docker0 (172.30.232.1/23), hassio (172.30.32.1/23), vethe7f6637 (), vethe1ca5ea (), vethbe97517 (), veth93ba3c7 (), veth961a247 (), veth1b9f065 (), veth8887d55 (), veth89d9f21 (), veth63eb273 ()
ipv6_addresses lo (::1/128), end0 (2a01:e0a:b15:4612::1b/128, 2a01:e0a:b15:4612:fd67:130a:b0e8:f629/64, fe80::19c3:1943:583b:86f4/64), docker0 (fe80::80ed:7fff:fec8:a4f4/64), hassio (fe80::58b6:f4ff:fe5c:443a/64), vethe7f6637 (fe80::d414:88ff:fe6f:cd9b/64), vethe1ca5ea (fe80::783b:c4ff:fee3:4b27/64), vethbe97517 (fe80::5cd2:f6ff:fe4d:1c54/64), veth93ba3c7 (fe80::108b:6bff:fec5:37ae/64), veth961a247 (fe80::8e0:23ff:fe6d:764b/64), veth1b9f065 (fe80::45b:e6ff:fec7:4075/64), veth8887d55 (fe80::58d2:c7ff:fecc:efc3/64), veth89d9f21 (fe80::14c2:51ff:fe8b:79a1/64), veth63eb273 (fe80::8824:6dff:fe04:8cc3/64)
announce_addresses 192.168.2.240, 2a01:e0a:b15:4612::1b, 2a01:e0a:b15:4612:fd67:130a:b0e8:f629, fe80::19c3:1943:583b:86f4
Recorder
oldest_recorder_run 23 décembre 2025 à 16:17
current_recorder_run 9 janvier 2026 à 14:42
estimated_db_size 825.75 MiB
database_engine sqlite
database_version 3.49.2
2

Bonjour,
oui que des badges possibles dans la partie badge.

3

Ok et donc comme dans les modèles de badges, il n’y a pas possibilité de faire des icones avec des badges. Je ne peux pas faire ce que je voudrais.
On est d’accord ?

4

pas possible, pas d’option de badge pour la mushroom badge template.
Après avec card_mod et de la bidouille ca dois être possible.

5

Salut

C’est ça que tu veux ?

image
image540×187 6.51 KB

1 « J'aime »
6

salut,
comment ta fais ?
edit:
ah, on peut utiliser une carte mushroom template, j’aurais appris un truc aujourd’hui.

1 « J'aime »
7

Oui c’est ça mais avec une carte de même taille que les autres :slight_smile:

8

J’ajoute un badge entité par exemple et ensuite editeur de code et je remplace par le code d’une mushroom template card

type: custom:mushroom-template-card
icon: mdi:mushroom
features_position: bottom
badge_text: "1"
9

oui, je viens de voir ca en testant :wink:

image
image744×146 7.45 KB

1 « J'aime »
10

Pour la taille il va falloir user du card_mod. On peut aussi utiliser les mushrooms chips bien sur et ajouter le badge avec card_mod.

11

Et par curiosité, tu peux me partager stp le code card_mod pour mettre la taille identique aux autres badges ?

12

J’ai pas essayé mais à priori @WarC0zes l’a sur le screen qu’il a posté, il va te poster ça :laughing:

2 « J'aime »
13

image
image749×145 7.23 KB

type: custom:mushroom-template-card
entity: group.grp_motion
icon: |
  {% if is_state('group.grp_motion', 'on') %} 
    mdi:motion-sensor
  {% else %}
    mdi:motion-sensor-off
  {% endif %}
badge_icon: |-
  {% set all = expand('group.grp_motion')| list -%} 
  {% set open1 = all | selectattr('state','eq','on')|list|count%}
  {% if open1 == 0 %}
    mdi:numeric-0
  {% elif open1 == 1 %}
    mdi:numeric-1        
  {% elif open1 == 2 %}
    mdi:numeric-2
  {% elif open1 == 3 %}
    mdi:numeric-3
  {% elif open1 == 4 %}
    mdi:numeric-4
  {% elif open1 == 5 %}
    mdi:numeric-5
  {% elif open1 == 6 %}
    mdi:numeric-6
  {% elif open1 == 7 %}
    mdi:numeric-7
  {% elif open1 == 8 %}
    mdi:numeric-8
  {% else %}
    none
  {% endif %}
badge_color: |
  {% set all = expand('group.grp_motion')| list -%} 
  {% set open1 = all | selectattr('state','eq','on')|list|count%}
  {% if open1 == 0 %}
    green
  {% else %}
    red
  {% endif %}
card_mod:
  style:
    ha-tile-icon$: |
      .container {
        --mdc-icon-size: 14px;
      }
    ha-tile-badge$: |
      .badge {
        height: 18px !important;
        width:  18px !important;
        --mdc-icon-size: 18px;
      }                   
    .: |
      ha-tile-badge {
      left: 32px !important;
      top: 0px !important;
      } 
      ha-card {
        background: none;
        margin-top: -10px;
      }

a paufiner, je regarderais demain matin pour faire comme un badge.

14

C’est encore un peu trop gros :slight_smile:

image
image944×134 5.13 KB

Mais je vois l’idée :+1:

15

je regarderais demain ,pas le temps la.

16

Oui pas d’urgence… Merci pour ton aide @WarC0zes

17

ça te conviens ?
image

type: custom:mushroom-template-card
icon: |
  {% if is_state('group.grp_motion', 'on') %} 
    mdi:motion-sensor
  {% else %}
    mdi:motion-sensor-off
  {% endif %}
badge_text: |-
  {% set all = expand('group.grp_motion')| list -%} 
  {% set open1 = all | selectattr('state','eq','on')|list|count%}
  {% if open1 == 0 %}
    0
  {% elif open1 == 1 %}
    1        
  {% elif open1 == 2 %}
    2
  {% elif open1 == 3 %}
    3
  {% elif open1 == 4 %}
    4
  {% elif open1 == 5 %}
    5
  {% elif open1 == 6 %}
    6
  {% elif open1 == 7 %}
    7
  {% elif open1 == 8 %}
    8
  {% else %}
    none
  {% endif %}
badge_color: |
  {% set all = expand('group.grp_motion')| list -%} 
  {% set open1 = all | selectattr('state','eq','on')|list|count%}
  {% if open1 == 0 %}
    green
  {% else %}
    red
  {% endif %}
card_mod:
  style:
    ha-tile-icon$: |
      .container {
        --mdc-icon-size: 16px;
        margin-top: -8px;
        margin-left: -10px
      }
    ha-tile-badge$: |
      .badge {
        --mdc-icon-size: 18px;
      }      
    .: |
      ha-card {
        border-radius: 50px;
        height: 36px !important;
        width: 50px;
      }
      .background {
        border-radius: 50px !important;
      }
      ha-tile-badge {
        left: 22px !important;
        top: 0px !important;
      }