Using Card-Mod to Specify Icons for Fan Preset Modes?

[DC01]

When I create a template fan using more than 3 speeds, the preset speed icons all become dots when using a tile card. Is there a way to specify what icon to use per preset?

Here is the YAML of this tile card.

features:
  - style: icons
    type: fan-preset-modes
    preset_modes:
      - low
      - medium
      - high
      - max
type: tile
entity: fan.preset_mode_fan
features_position: bottom
vertical: false
name: Ceiling Fan
grid_options:
  columns: 9
  rows: 2
hide_state: false

Here are the states this template fan supports.

preset_modes: off, low, medium, high, max
percentage: 0
percentage_step: 25
preset_mode: off
friendly_name: Girl's Ceiling Fan Modes
supported_features: 57

[Ildar_Gabdullin]

Use this as a starting point:
main card-mod thread → 1st post → “fantastic” link at the bottom → Tile → custom icons for features

[hoodieraven]

Hi Ildar,

I’m looking for this also. I saw your original example but I’m a bit confused by the icon what you are using there, how would you assign a “buil-in” icon like “mdi:water”?

I was thinking something like this (I have a humidifier):

type: humidifier
entity: humidifier.d22_purify
features:
  - type: humidifier-toggle
  - style: icons
    type: humidifier-modes
    modes:
      - Laundry
      - Manual
      - Purify
      - sleep
card_mod:
  style:
    hui-card-features $ hui-humidifier-modes-card-feature $ ha-control-select $: |
      div#option-manual ha-svg-icon { 
         -- icon: mdi:water
      }

Image for illustration:

[Ildar_Gabdullin]

You need to define an SVG path as described in example.
This path can be found in Code inspector for a needed icon or in Material design icons site.

[hoodieraven]

Hi Ildar,

First of all thanks for the answer. My problem is that the humidifier card seems to be bit too complicated for me and I cannot figure out the correct call chain. Here is the full path to the svg icon for one of my options:

/html/body/home-assistant//home-assistant-main//ha-drawer/partial-panel-resolver/ha-panel-lovelace//hui-root//div/hui-view-container/hui-view/hui-sections-view//div/ha-sortable/div/div[2]/hui-section/hui-grid-section//ha-sortable/div/div[2]/hui-card/hui-humidifier-card//ha-card/hui-card-features//hui-card-feature[2]//hui-humidifier-modes-card-feature//ha-control-select//div/div[1]/div/ha-attribute-icon//ha-icon//ha-svg-icon

I tried this but did not work:

card_mod:
  style:
    ha-card $ hui-card-features $ hui-card-feature $ hui-humidifier-modes-card-feature $ ha-control-select $: |
      div#container div#option-Manual div#content ha-attribute-icon $ ha-icon $ ha-svg-icon $:|
        {
          --card-mod-icon: mdi:account;
        }

Any suggestions how I should reference the call chain in the card-mod?

Thanks

[Ildar_Gabdullin]

As I said before, take the example and set SVG path. Cannot say anything about the path, not using thermostat and away from PC. The card-mod-icon cannot be used here.

[LiQuid_cOOled (Not really a...)]

as @Ildar_Gabdullin stated

take the example and set SVG path

type: humidifier
entity: humidifier.d22_purify
features:
  - type: humidifier-toggle
  - style: icons
    type: humidifier-modes
    modes:
      - Continuous
      - Dry
      - Set
card_mod:
  style:
    hui-card-features $:
      hui-card-feature:nth-child(2) $:
        hui-humidifier-modes-card-feature $:
          ha-control-select$: >
            #option-Continuous>div>ha-attribute-icon { 
            content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='red' stroke='white' stroke-width='1.2px' d='M20.56 3.91c.59.59.59 1.54 0 2.12l-3.89 3.89l2.12 9.19l-1.41 1.42l-3.88-7.43L9.6 17l.36 2.47l-1.07 1.06l-1.76-3.18l-3.19-1.77L5 14.5l2.5.37L11.37 11L3.94 7.09l1.42-1.41l9.19 2.12l3.89-3.89c.56-.58 1.56-.58 2.12 0'/%3E%3C/svg%3E");
              height: 30px;
              }

[hoodieraven]

Hi,

Thanks for the clarification, exactly what I was not knowing, how to define the style. But which part of the code defines which icon to be used? Sorry I cannot find it in here:

content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='red' stroke='white' stroke-width='1.2px' d='M20.56 3.91c.59.59.59 1.54 0 2.12l-3.89 3.89l2.12 9.19l-1.41 1.42l-3.88-7.43L9.6 17l.36 2.47l-1.07 1.06l-1.76-3.18l-3.19-1.77L5 14.5l2.5.37L11.37 11L3.94 7.09l1.42-1.41l9.19 2.12l3.89-3.89c.56-.58 1.56-.58 2.12 0'/%3E%3C/svg%3E");

[Ildar_Gabdullin]

Everything in quotes after “d=”

[hoodieraven]

Hi guys,

Thank you for all your inputs, now I get it. I still have lot to learn how to target the desired features. This is where I got with your help:

One question remains, how to change the color of the icon based on what mode is slecet. If default icons are used than HA autmatically recolors the icon to white, and the selection is marked with blue.

I would use some kind of “IF” structure, but I do not know where to put it exactly(I tried different ways, no succes).
Also I do not know what should be the condition of the “IF”, I saw an ‘is_mode()’ function but my entiti/device is humidifer.D22_purify and I do not know how to extract the ‘mode’ info and use it for the decision making.

Btw, you guys are awesome, I do not whish to take advanteg of your kind asssitance, I can live with this already

[kamikazedan (Dan)]

Hey @hoodieraven,

@hoodieraven

how would you assign a “built-in” icon like “mdi:water”?

You can use the built in mdi icons rather than messing around with SVGs.

I recently did this for my fan speed modes as they did not import well into home assistant.

  type: thermostat
  entity: climate.dan_s_aircon
  show_current_as_primary: false
  features:
    - style: icons
      type: climate-hvac-modes
      hvac_modes:
        - auto
        - cool
        - fan_only
        - "off"
    - style: icons
      type: climate-fan-modes
      fan_modes:
        - "4"
        - "3"
        - "2"
        - "1"
  card_mod:
    style:
      hui-card-features $:
        hui-card-feature:nth-child(2) $:
          hui-climate-fan-modes-card-feature $:
            ha-control-select$: |
              #option-1>div>ha-attribute-icon { 
                --card-mod-icon: mdi:fan-speed-3
              } 
              #option-2>div>ha-attribute-icon { 
                --card-mod-icon: mdi:fan-speed-2
              }
              #option-3>div>ha-attribute-icon { 
                --card-mod-icon: mdi:fan-speed-1
              }
              #option-4>div>ha-attribute-icon { 
                --card-mod-icon: mdi:fan-auto
              }