Change Icon on Entity Value

Configuration
1

Hello,

I would like to change the color of the icons based on the value, example:

airc
airc1416×656 33 KB

Like this colors:

aircc
aircc684×585 16.7 KB 

type: vertical-stack
cards:
  - type: glance
    entities:
      - entity: sensor.acc_air_today
        name: Lucht Kwaliteit Vandaag
      - entity: sensor.acc_air_tomorrow
        name: Lucht Kwaliteit Morgen
    columns: 2
    title: Lucht Kwaliteit
    state_color: true
  - type: horizontal-stack
    cards:
      - type: vertical-stack
        cards:
          - type: glance
            entities:
              - entity: sensor.acc_ragweed_pollen_today
                name: Ambrosiapollen
              - entity: sensor.acc_grass_pollen_today
                name: Graspollen
              - entity: sensor.acc_tree_pollen_today
                name: Boompollen
              - entity: sensor.acc_mold_today
                name: Schimmelsporen
              - entity: sensor.acc_dust_today
                name: Huisstofmijtgehalte
            state_color: true
            title: Vandaag - AllergieĂŤn
            columns: 5
          - type: glance
            entities:
              - entity: sensor.acc_common_cold_today
                name: Verkoudheid
              - entity: sensor.acc_flu_today
                name: Griep
              - entity: sensor.acc_asthma_today
                name: Astma
              - entity: sensor.acc_arthritis_today
                name: Artritispijn
              - entity: sensor.acc_migraine_today
                name: Migraine
              - entity: sensor.acc_sinus_today
                name: Sinushoofdpijn
            state_color: true
            columns: 6
            title: '- Kans op'
      - type: vertical-stack
        cards:
          - type: glance
            entities:
              - entity: sensor.acc_ragweed_pollen_tomorrow
                name: Ambrosiapollen
              - entity: sensor.acc_grass_pollen_tomorrow
                name: Graspollen
              - entity: sensor.acc_tree_pollen_tomorrow
                name: Boompollen
              - entity: sensor.acc_mold_tomorrow
                name: Schimmelsporen
              - entity: sensor.acc_dust_tomorrow
                name: Huisstofmijtgehalte
            state_color: true
            title: Morgen - AllergieĂŤn
            columns: 5
          - type: glance
            entities:
              - entity: sensor.acc_common_cold_tomorrow
                name: Verkoudheid
              - entity: sensor.acc_flu_tomorrow
                name: Griep
              - entity: sensor.acc_asthma_tomorrow
                name: Astma
              - entity: sensor.acc_arthritis_tomorrow
                name: Artritispijn
              - entity: sensor.acc_migraine_tomorrow
                name: Migraine
              - entity: sensor.acc_sinus_tomorrow
                name: Sinushoofdpijn
            state_color: true
            columns: 6
            title: '- Kans op'

I tried with conditional but it does not work.

Is it possible to change icon’s in a glance, or can someone help me started with this?

2

Hi there, you should be able to get this working with

or even with this

3

Thank you,
Do you maybe know if i can use this in my current glance or must i make all new ‘button-card’ entities?

4

you’ll have to make all new. Or use card-mod to adjust each glance item’s color. Both avenues are difficult for beginners.

5

@petro

I did this:

    card_mod:
      style: |
        :host {
          color: green;
          --card-mod-icon-color: green;
          --mdc-icon-size: 28px;
        }

And it works for the icons, now i think that with conditional i can make them change color.
However, the code i have now, I think it should be:

    card_mod:
      style: |
        .ha-icon {
          color: green;
        }

But this does not work?

1 Like
6

I have no idea what you’re asking. If you’re trying to choose a color based on the state you need to make a template

7

I mad it all new:

acc
acc711×751 26.4 KB 

type: custom:button-card
entity: sensor.acc_air_today
aspect_ratio: 0
tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    title: Luchtkwaliteit Vandaag
    style:
      hui-vertical-stack-card:
        $hui-entities-card$: |
          #states {
            padding-top: 0.5em;
            padding-bottom: 1.2em;
          }
    card:
      type: vertical-stack
      cards:
        - type: entity
          entity: sensor.acc_air_today
          name: Luchtkwaliteit Vandaag
        - type: entities
          card_mod:
            class: content
          entities:
            - type: custom:gap-card
              height: 10
            - entity: sensor.acc_air_today_info
              name: Info
            - type: custom:gap-card
              height: 10
      style: |
        ha-card {
          box-shadow: none;
          background: transparent !important;
         }
name: Luchtkwaliteit
color_type: icon
show_state: true
show_entity_picture: true
styles:
  card:
    - width: 680px
    - height: 130px
    - margin: 0px
  name:
    - align-self: start
    - position: absolute
    - top: 10px
    - font-size: 16px
    - font-weight: bold
    - font-family: Sans-serif
  img_cell:
    - justify-content: start
    - align-items: start
    - padding-left: 600px
    - padding-top: 1px
    - margin: 0px
  state:
    - justify-self: start
    - font-size: 16px
    - font-family: Sans-serif
    - font-color: rgba(255, 0, 0, 0.8)
    - text-transform: capitalize
    - padding-left: 331px
    - margin-bottom: '-25px'
  icon:
    - width: 7%
state:
  - value: 0
    color: rgba(103,251,135,0.8)
  - value: 1
    color: rgba(192,243,106,0.9)
  - value: 2
    color: rgba(255,191,61,0.7)
  - value: 3
    color: rgba(255,129,44,0.7)
  - value: 4
    color: rgba(255,122,42,0.8)
  - value: 5
    color: rgba(255,101,37,0.8)
  - value: 6
    color: rgba(252,99,79,0.9)
  - value: 7
    color: rgba(254,59,59,0.8)
  - value: 8
    color: rgba(254,44,44,0.8)
  - value: 9
    color: rgba(253,12,69,0.8)
  - value: 10
    color: rgba(253,12,93,1.0)

Used states to change color.

But i have one problem left,
The ‘Luchtkwaliteit’ its values are from 0 to 100+ I can not do 'state value 1, value 2… till 100.
Is there a way to do "value > 10 , value > 50 " etc?

8

I also want do do this… State vaule from 0 to 250

9

@cbothma

I made names from it. than change colors (Template)

---
#
# Creates a state from the acc_air_today value, for colored icons
#
sensor:
  name: Air Quality Today Names
  state: >
    {% set quality = states('sensor.acc_air_today')|float(0) %}
    {% if quality > 249 %}
      Gevaarlijk
    {% elif 249 >= quality > 149 %}
      Zeer Ongezond
    {% elif 149 >= quality > 99 %}
      Ongezond
    {% elif 99 >= quality > 49 %}
      Slecht
    {% elif 49 >= quality > 19 %}
      Redelijk
    {% elif 19 >= quality > 0 %}
      Uitstekend
    {% else %}
      Onbekend
    {% endif %}
1 Like
10

Could someone please explain this to me? Step by step…
One day researching and nothing. :frowning:

I would like to change the icon color based on values.
@cbothma Could you please tell me what code you used and where you placed it?

Thank you very much!!

11

Someone? Please?