ScottS
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:
What they do look like on HA reload:
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
}
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;
}
ScottS
3
Thank you. I’ll make changes and try.
How can I color icon w/o card_mod?
That you cannot do and will need card_mod
card_mod:
style: |
ha-card {
--card-mod-icon-color: blue;
}
ScottS
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.
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
ScottS
7
I’ll try this as it’s still not displaying properly every time thanks.
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;
}
ScottS
9
Seems this may be the answer… Thanks.
Edit: spoke too soon… Not sure why it’s doing this, very weird.
ScottS
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.