Icon Color in Template

[broyuken]

I want to be able to set the icon color dynamically based on the state of a sensor. The end goal is to be able to have sensors with high battery percentage be green, 50% be yellow, and less than 20% be red. Or whatever percentages I want to put on it. When I try to code below, I get no colors and the icon circle just disappears.

type: custom:auto-entities
card:
  square: false
  columns: 2
  type: grid
card_param: cards
filter:
  include:
    - attributes:
        device_class: battery
      domain: sensor
      sort:
        method: state
        numeric: true
      options:
        type: custom:mushroom-entity-card
        icon_color: >-
          {% if states('sun.sun') == 'above_horizon' %}
            green
          {% else %}
            red
          {% endif %}
        entities:
          - this.entity_id
  exclude:
    - entity_id: sensor.*iphone_battery*
    - entity_id: sensor.*low_battery_level

[Mariusthvdb]

you should probably hop over to the community and check the various threads on either card_mod or mushroom cards. (probably the entity-card does not allow templates on that icon-color so you need some card_mod ornate another card)

this space is for issues, nor really for support question on formatting (in another card...) ;-)

although there also is some odd syntax in your auto-entities config.

a lot to work on, in the community

to give you a head start, try:

      options:
        type: custom:mushroom-entity-card
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                  outline: var(--disabled-text-color) 1.5px solid;
                 --icon-color: pink !important;
                 --icon-color-disabled: var(--disabled-text-color) !important;
                 --shape-color-disabled: var(--primary-background-color) !important;
                 --shape-color: rgb(35,35,41) !important;
              }   

[broyuken]

It’s not really a formatting question, it’s an issue that you can’t seem to use templates in the icon color config. Hence the issue.

[Mariusthvdb]

Of the mushroom card...

[broyuken]

Fair enough

[Mariusthvdb]

cool, please post the link if you open a thread in community or add to the existing one in mushroom card. Id love to know too

just so you know, I did test the purest config first

type: custom:mushroom-entity-card
entity: sensor.achter_deur_battery_level
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
         outline: var(--disabled-text-color) 1.5px solid;
         --icon-color: {{'red'}} !important;
         --icon-color-disabled: var(--disabled-text-color) !important;
         --shape-color-disabled: var(--primary-background-color) !important;
         --shape-color: rgb(35,35,41) !important;
      }   

where

--icon-color: red;

just works out of the box.

its not always simple to find the culprit card. but by making the minimal card like this, you can test whether the template would work at all. It doesnt in this case, so we're on our way to find a solution for mushroom card first.....