Tile card: How to override feature icons?

Configuration Frontend
,
1

I’ve got a tile card set up that displays the fan speeds of my climate entity:

image
image750×239 11.9 KB

I’d rather the fan speed icons for low/med/high were in the same theme as the auto icon:

image
image927×229 4.12 KB

Is there any way to achieve this in the YAML config?

2

Customizing entities - Home Assistant.

3

From my understanding the feature icons are hardcoded

image
image732×586 61.6 KB

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

4

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");
                }

image

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");
      }

image