Bei state "on" ein anderes ICON

Dashboard/Cards/Frontend
1

Hallo,

wie kann ich bei state “on” das Icon anzeigen lassen und bei default nicht?

type: custom:button-card
color_type: card
entity: automation.schlafzimmer_unten_fenstersicherung
name: Schlafzimmer Fenster<br>Überwachung eingeschaltet
color: white
show_entity_picture: true
show_icon: false
size: 50%
tap_action:
  action: toggle
double_tap_action:
  action: more-info
styles:
  card:
    - filter: opacity (70%)
    - height: 80px
    - font-weight: bold
    - color: white
    - font-size: 19px
    - justify-self: start
    - padding: 10px 5px
    - padding-top: 10px
    - font-family: Helvetica
  icon:
    - color: white
    - width: 50px
    - height: 50px
    - padding: 0px 0px 5px 0px
state:
  - value: 'on'
    entity: automation.schlafzimmer_unten_fenstersicherung
    color: red
    show_icon: true
    icon: mdi:alert
    styles:
      card:
        - animation: blink 0.2s linear infinite
        - font-size: 17px
        - filter: drop-shadow(0 0 1.0rem rgb(255,255,255))
        - border: 5px
  - operator: default
    name: Schlafzimmer Fenster<br>Überwachung ausgeschaltet
    color: '#006400'

Screenshot 2024-07-06 131601

Wenn ich oben im code show_icon auf true setze ist natürlich bei default auch wieder ein Icon!

2

Warum setzt du bei default das dann nicht einfach auf false?

3

Mach nen state mit value off dann show_icon:false oder

bei styles/ icon - filter: opacity(0%)
show_icon muss dann natürlich true sein da es dann nur bei state off unsichtbar wird.

4

OK. Danke aber trotzdem rutscht dann die Zeile einen tiefer, als wenn das Icon da wäre. Sieht nicht schön aus, möchte es weiterhin mittig haben???

5

Dann mach dir ein “custom_fields”

Das kannst dann platzieren wo du willst ohne das sich was verschieben

Beispiel

type: custom:button-card
name: Playstation
custom_fields:
  icon_2: >
    <ha-icon icon="mdi:sony-playstation" style="width: 15px; height: 15px; color: var(--orange-color);"></ha-icon>
styles:
  custom_fields:
    icon_2:
      - position: absolute
      - margin-top: 5px
      - margin-left: 5px

Ps: der state/value braucht keine entity da er sich immer auf die in der Karte angegebene bezieht