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

DC01 · March 19, 2025, 10:09pm

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 · March 20, 2025, 1:50pm

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

hoodieraven · March 26, 2025, 10:48am

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 · March 27, 2025, 10:26pm

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 · March 30, 2025, 11:12am

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 · March 30, 2025, 11:15am

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 · March 30, 2025, 11:33am

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 · March 31, 2025, 8:50am

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 · March 31, 2025, 11:39am

Everything in quotes after “d=”

hoodieraven · March 31, 2025, 8:24pm

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 · April 15, 2025, 10:33pm

Hey @hoodieraven,

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
              }

trianglesis · August 22, 2025, 9:53am

Thanks for the example!

Update from my side:

Intuitively seems simple, but I’ve failed to reproduce.

Row 4th, attribute ID is the same as at the object, but no custom icons.

UPD: My bad, I’ve skipped the card mod installation path.

UPD2: Yet I’m doing something wrong

# Load frontend themes from the themes folder
frontend:
  themes: !include_dir_merge_named themes
  # https://github.com/thomasloven/lovelace-card-mod?tab=readme-ov-file
  extra_module_url:
    - /config/www/community/lovelace-card-mod/card-mod.js

HACS installed, HA restarted twice - no icons =(

UPD3: Having the same path as in inspect view:

#option-none > div:nth-child(1) > ha-attribute-icon:nth-child(1)
I cannot recreate this feature:

card_mod:
  style:
    ha-card $:
      hui-card-features $:
        hui-card-feature:nth-child(4) $:
          hui-climate-preset-modes-card-feature $:
            ha-control-select$: |
              #option-none>div>ha-attribute-icon { 
                --card-mod-icon: mdi:fan-speed-1
              }

Fixed:

card_mod:
  style:
    hui-card-features $:
      hui-card-feature:nth-child(4) $:
        hui-climate-preset-modes-card-feature $:
          ha-control-select$: |
            #option-none>div>ha-attribute-icon { 
              --card-mod-icon: mdi:fan-speed-1
            }