Farbe eines Icons ändern ( custom:multiple-entity-row)

[m4rty]

Hi zusammen,

es geht explizit um die „custom:multiple-entity-row“ Card
Wie kann ich bei dieser die Farbe einzelner Icons ändern?

Beispiel:

type: entities
entities:
    - type: custom:multiple-entity-row
      entity: sensor.temperatur
      name: Test
      entities:
          - entity: sensor.temperatur
            name: false
            icon: true

So schaut es dann aus:

Ich hätte gern den zweiten Thermometer Icon in rot.
Wenn ich Card-Mode nutze, werden leider beide rot:

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.temperatur
    name: Test
    
    card_mod:
     style: |
       :host {      
        --icon-primary-color: red !important;
       }
    
    entities:
      - entity: sensor.temperatur
        name: false
        icon: true

Was mache ich falsch?

Grüße Marty

[jayjojayson]

Hi, das ist hier tatsächlich ein bisschen blöd, weil die icon im shadow-root liegen. Da muss man tiefer ansetzen, um die Farbe für das zweite icon zu ändern. Die Farbe vom ersten Icon hast du ja richtig gefunden. Anbei der Code.

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.aussentemperatur_temperatur
    name: Test
    entities:
      - entity: sensor.aussentemperatur_temperatur
        name: false
        icon: true
    card_mod:
      style: |
        :host {
          --icon-primary-color: red;
        }
        state-badge:last-of-type {
          --icon-primary-color: green !important;
        }

[m4rty]

Crazy shit. Danke!! Ihr seid die besten

[m4rty]

Hi nochmal, hab doch noch ein „kleines“ Problem, wobei ich noch keine Lösung finde:

Habe jetzt mehrere Werte und Piktogramme in einer Reihe:

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.test
    tap_action:
      action: none
    icon_tap_action:
      action: none
    hold_action:
      action: none
    name: Außen / Terrasse
    icon: " "
    entities:
      - entity: sensor.test
        name: false
        icon: true
      - entity: sensor.test
        name: false
      - entity: sensor.luftfeuchtigkeit_aussen
        name: false
        icon: true
      - entity: sensor.luftfeuchtigkeit_aussen
        name: false
      - entity: sensor.test
        name: false
        icon: mdi:biohazard
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              display: none;
            }
            .info {
              margin-left:0 !important;
            }   

Wenn ich hierbei die Lösung von oben anwende, habe ich alle 3 Piktogramme (Thermometer, Wassertropfen, Biogefahr) grün, das Rote vom Anfang des Threads habe ich ausgeblendet, damit sich die Reihe nach links verschiebt.

Besteht die Möglichkeit nur das letzte ( icon: mdi:biohazard) zu Färben?
Sollte es nicht gehen, dann ggf. ein eigenes hochladen, was die Farbe schon hat?

[jayjojayson]

Also ich habe mal herumprobiert, aber ich kann auch nur alle drei icon in der Farbe ändern. Die hinterlegte id ist auch bei allen drei die gleiche, sehe daher erstmal kein herankommen.

Nur ausblenden der icon würde noch funktionieren.
icon: " "

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.aussentemperatur_luftfeuchtigkeit
    tap_action:
      action: none
    icon_tap_action:
      action: none
    hold_action:
      action: none
    name: Außen / Terrasse
    icon: " "
    entities:
      - entity: sensor.aussentemperatur_luftfeuchtigkeit
        name: false
        icon: true
      - entity: sensor.aussentemperatur_luftfeuchtigkeit
        name: false
      - entity: sensor.aussentemperatur_luftfeuchtigkeit
        name: false
        icon: true
      - entity: sensor.aussentemperatur_luftfeuchtigkeit
        name: false
      - entity: sensor.aussentemperatur_luftfeuchtigkeit
        name: false
        icon: " "
    card_mod:
      style: |
        :host {
          --icon-primary-color: red !important;
        }