I’ve got a tile card set up that displays the fan speeds of my climate entity:
I’d rather the fan speed icons for low/med/high were in the same theme as the auto icon:
Is there any way to achieve this in the YAML config?
From my understanding the feature icons are hardcoded
You’d be better off using a Template Mushroom card with scripts to activate the different speeds. Mushroom is a Tile card on steroids and is more customizable.
You can mod the tile card, but it’s limited to things like color unless you do something like this
Your possible WORKING (but cumbersome) option is using card-mod:
- type: tile
entity: climate.ecobee
features:
- style: icons
type: climate-preset-modes
preset_modes:
- home
- eco
- away
card_mod:
style:
hui-card-features $ hui-climate-preset-modes-card-feature $ ha-control-select $:
div#option-eco ha-attribute-icon $ ha-icon $: |
ha-svg-icon {
content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='magenta' d='M20 22H4V20C4 17.8 7.6 16 12 16S20 17.8 20 20M8 9H16V10C16 12.2 14.2 14 12 14S8 12.2 8 10M19 4C18.4 4 18 4.4 18 5V6H16.5L15.1 3C15 2.8 14.9 2.6 14.7 2.5C14.2 2 13.4 1.9 12.7 2.2L12 2.4L11.3 2.1C10.6 1.8 9.8 1.9 9.3 2.4C9.1 2.6 9 2.8 8.9 3L7.5 6H6V5C6 4.4 5.6 4 5 4S4 4.4 4 5V6C4 7.1 4.9 8 6 8H18C19.1 8 20 7.1 20 6V5C20 4.5 19.6 4 19 4Z'/%3E%3C/svg%3E");
}
Similarly - for thermostat:
type: thermostat
entity: climate.ecobee
features:
- type: climate-hvac-modes
card_mod:
style:
hui-card-features $ hui-climate-hvac-modes-card-feature $ ha-control-select $: |
div#option-auto ha-svg-icon {
content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='magenta' d='M20 22H4V20C4 17.8 7.6 16 12 16S20 17.8 20 20M8 9H16V10C16 12.2 14.2 14 12 14S8 12.2 8 10M19 4C18.4 4 18 4.4 18 5V6H16.5L15.1 3C15 2.8 14.9 2.6 14.7 2.5C14.2 2 13.4 1.9 12.7 2.2L12 2.4L11.3 2.1C10.6 1.8 9.8 1.9 9.3 2.4C9.1 2.6 9 2.8 8.9 3L7.5 6H6V5C6 4.4 5.6 4 5 4S4 4.4 4 5V6C4 7.1 4.9 8 6 8H18C19.1 8 20 7.1 20 6V5C20 4.5 19.6 4 19 4Z'/%3E%3C/svg%3E");
}
@Ildar_Gabdullin
Hi! I’m trying to reach the below label on the thermostat card. I’ve already tried something, but have the feeling that it’s completely wrong. Can you correct that?
Thanks
card_mod:
style:
hui-thermostat-card $: |
ha-card.type-thermostat $ div-container $
ha-state-control-climate-temperature $: |
div.container.lg $ div.info $
p.label {
....
}
I am not using thermostat, try this:
hui-thermostat-card $:
ha-card.type-thermostat $ div-container $:
ha-state-control-climate-temperature $:
div.container.lg $ div.info $: |
p.label {
....
}
Have no idea about an internal structure of this card, just corrected obvious errors.
Thanks! Unfortunately that didn’t work. Obviously the rest structure is wrong also. Could you look into that, please. I’m sure that, having such a huge experience with card_mod, that wouldn’t be such a trouble for you. Я уверен 
ес офкоз, just one problem - install a thermostat which is absent)
Sorry, didn’t catch you. You always can install a generic thermostat card using any sensor as a dummy, so you can do your experiments.
Sure), no time these days, no access to PC, and many other things which should not be told here due to specific local Russian reasons.
Found this topic trying to hide the set temperature instead of the top label. However it helped me out for my solution so though I would share the solution below. Given the structure of the card you can cut a lot of the dictionary out. The main issue on this is that the p.label.secondary is also picked up during this hence the extra bit of code to add back the colour to this. Code that seems to work is as below:
type: thermostat
entity: climate.bedroom
features:
- type: climate-hvac-modes
show_current_as_primary: true
name: ' '
card_mod:
style:
ha-state-control-climate-temperature $: |-
p.label.secondary {
color: var(--primary-text-color);
}
p.label {
color: rgba(0, 0, 0, 0);
}
What this does below
Hope this helps.
This one hides it, but you can do what ever you want…
ha-state-control-climate-temperature $: |
.label:nth-of-type(1) { color: transparent !important; }