Card-mod-icon-color does not work on HA reload

Configuration Frontend
1

When I reload HA, the icon colors are not colored… They are the default color. I must manually reload all yaml in order for the icons to change.

Assuming I have the proper code, what can I do about this?

What they should look like:

Screenshot_20240322_200645_Home Assistant
Screenshot_20240322_200645_Home Assistant1080×242 43.5 KB

What they do look like on HA reload:

Screenshot_20240322_204445_Home Assistant
Screenshot_20240322_204445_Home Assistant1080×236 41.9 KB

type: horizontal-stack
cards:
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: script.scene_blue
    name: Blue
    card_mod:
      style: |-
        ha-card {
        --card-mod-icon: mdi:palette;
        --card-mod-icon-color: blue
        }
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: script.green_scene
    name: Green
    card_mod:
      style: |-
        ha-card {
        --card-mod-icon: mdi:palette;
        --card-mod-icon-color: green
        }
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: script.scene_orange
    name: Orange
    card_mod:
      style: |-
        ha-card {
        --card-mod-icon: mdi:palette;
        --card-mod-icon-color: orange
        }
  - show_name: true
    show_icon: true
    type: button
    tap_action:
      action: toggle
    entity: script.red_scene
    name: Red
    card_mod:
      style: |-
        ha-card {
        --card-mod-icon: mdi:palette;
        --card-mod-icon-color: red
        }
2

You don’t need card_mod to define the icon on a button card. In addition you were missing a few ; in your card_mod code.

Does this work better?

type: horizontal-stack
cards:
  - show_name: true
    show_icon: true
    type: button
    icon: mdi:palette    
    tap_action:
      action: toggle
    entity: script.fan_speed_1
    name: Blue
    card_mod:
      style: |
        ha-card {
          --card-mod-icon-color: blue;
         }
  - show_name: true
    show_icon: true
    icon: mdi:palette
    
    type: button
    tap_action:
      action: toggle
    entity: script.fan_speed_1
    name: Green
    card_mod:
      style: |
        ha-card {
         --card-mod-icon-color: green;
         }
  - show_name: true
    show_icon: true
    type: button
    icon: mdi:palette
    tap_action:
      action: toggle
    entity: script.fan_speed_1
    name: Orange
    card_mod:
      style: |
        ha-card {
         --card-mod-icon-color: orange;
         }
  - show_name: true
    show_icon: true
    type: button
    icon: mdi:palette
    tap_action:
      action: toggle
    entity: script.fan_speed_1
    name: Red
    card_mod:
      style: |
        ha-card {
         --card-mod-icon-color: red;
        }
3

Thank you. I’ll make changes and try.

How can I color icon w/o card_mod?

4

That you cannot do and will need card_mod

card_mod:
      style: |
        ha-card {
          --card-mod-icon-color: blue;
         }
5

Thanks. I misread your original solution, thinking I didn’t need card_mod for color. I made your recommended changes. I’ll report back.

6

Appreciate the reply…adding !important after the color may help as well. That ensures there is more importance to a property/value than normal.

card_mod:
      style: |
        ha-card {
          --card-mod-icon-color: blue !important;
         }
1 Like
7

I’ll try this as it’s still not displaying properly every time thanks.

8

I actually just looked at this for another user. This should hep fix your issue…

card_mod:
      style: |
        ha-state-icon {
         --state-color: blue !important;
         }

type: horizontal-stack
cards:
  - show_name: true
    show_icon: true
    type: button
    icon: mdi:palette    
    tap_action:
      action: toggle
    entity: script.fan_speed_1
    name: Blue
    card_mod:
      style: |
        ha-state-icon {
         --state-color: blue !important;
         }
  - show_name: true
    show_icon: true
    icon: mdi:palette
    
    type: button
    tap_action:
      action: toggle
    entity: script.fan_speed_1
    name: Green
    card_mod:
      style: |
        ha-state-icon {
         --state-color: green !important;
         }
9

Seems this may be the answer… Thanks.

Edit: spoke too soon… Not sure why it’s doing this, very weird.

10

Something I noticed, and changed… I didn’t have card-mod installed as a frontend, only as a resource. We’ll see if that makes a difference.