Can't get MDI replaced on fan-preset

[VladStar (Vladislav Staroselskiy)]

After spending a number of hours and trying hundreds of different combinations, I am about to give up. This community is the last resort and I would appreciate if someone can help me to get a working solution.

What I am trying to do - replace those meaningless control dots (likely SVG-generated) with MDI icons:

Those buttons are “Toggle fan”, “Increase speed”, “Decrease speed”. If I figure out how to replace at least one - I should be able to figure out the rest.

This is the screenshot of the inspector page:

One of those hundreds of variants I tried (addiing div, removing div, adding dollar signs, removing dollar signs etc.):

card_mod:
  style:
    hui-card-features $:
      hui-card-feature $:
        hui-fan-preset-modes-card-feature $:
          ha-control-select $:
            div div div ha-attribute-icon $: |
              ha-icon { 
                --ha-card-background: teal;
                --card-mod-icon: mdi:fan-speed-1
              } 

card_mod is installed and working - I can replace a background or icons on the whole tile using generic CSS, but those specific DOM elements. What am I doing wrong?

[VladStar (Vladislav Staroselskiy)]

If I do the on the for the :host element

card_mod:
  style: |
    :host { 
      --card-mod-icon: mdi:fan-speed-1
    } 

I am getting this

but when I try to use DOM path (even obtained via the card-mod-helper:

"body>home-assistant$home-assistant-main$ha-drawer>partial-panel-resolver>ha-panel-lovelace$hui-root$#view>hui-view>hui-masonry-view$#columns>div:nth-child(3)>hui-card>hui-vertical-stack-card$#root>hui-card:nth-child(5)>hui-tile-card$ha-card>ha-tile-container>hui-card-features$hui-card-feature$hui-fan-preset-modes-card-feature$ha-control-select$#option-toggle\\fan>div>ha-attribute-icon"

and use with this config:

card_mod:
  style:
    hui-card-features$hui-card-feature$hui-fan-preset-modes-card-feature$ha-control-select$: |
       #option-toggle\\fan>div>ha-attribute-icon { 
          --card-mod-icon: mdi:fan-speed-1
       }

nothing works. No matter what I do to this path. Even though this guy was in the same situation and got it working

[trianglesis (Ole D)]

Hi Vlad,

This is how it worked for me after all

card_mod:
  style:
    hui-card-features $:
      hui-card-feature:nth-child(2) $:
        hui-climate-fan-modes-card-feature $:
          ha-control-select$: |
            #option-Turbo>div>ha-attribute-icon { 
              --card-mod-icon: mdi:car-turbocharger
            }
      hui-card-feature:nth-child(3) $:
        hui-climate-preset-modes-card-feature $:
          ha-control-select$: |
            #option-none>div>ha-attribute-icon { 
              --card-mod-icon: mdi:cancel
            }
            #option-fastcooling>div>ha-attribute-icon { 
              --card-mod-icon: mdi:fast-forward-outline
            } 
            #option-longreach>div>ha-attribute-icon { 
              --card-mod-icon: mdi:arrow-expand-right
            } 
            #option-quiet>div>ha-attribute-icon { 
              --card-mod-icon: mdi:volume-off
            } 
            #option-windfree>div>ha-attribute-icon { 
              --card-mod-icon: mdi:weather-windy
            } 

PIC:

[VladStar (Vladislav Staroselskiy)]

Thank you, Ole, for the reply!

I am pretty sure I already tried that one (with and without “nth-child”, with and without backslashes, on the same line or separate lines)

Just can’t figure out what’s wrong with it… so frustrating

[VladStar (Vladislav Staroselskiy)]

In general, card_mod seems to be working fine in my setup, extra_module_url is defined in configuration.yaml correctly, just DOM doesn’t seem to be working.

[VladStar (Vladislav Staroselskiy)]

After a few days of struggling, I finally got it working with the following code. Note a single backslash prior to each space in #option-… card-mod-helper doesn’t seem to translate them correctly.

card_mod:
  style:
    hui-card-features$:
      hui-card-feature$:
        hui-fan-preset-modes-card-feature$:
          ha-control-select$: |
            #option-toggle\ fan>div>ha-attribute-icon {
              --card-mod-icon: mdi:fan;
              --card-mod-icon-color: green;  
            }
            #option-fan\ speed\ up>div>ha-attribute-icon {
              --card-mod-icon: mdi:arrow-up-bold;
              --card-mod-icon-color: green;  
            }
            #option-fan\ speed\ down>div>ha-attribute-icon {
              --card-mod-icon: mdi:arrow-down-bold;
              --card-mod-icon-color: green;  
            }

Another issue was that the URL under the extra_module_url in configuration.yaml should exactly match to what HACS lists under the Resources for the card_mod. Somehow I thought it should be /local/community/…

  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js?hacstag=<number>

[VladStar (Vladislav Staroselskiy)]

One more important thing - I have a few tiles wrapped up by the vertical stack. This code only worked when defined on the tile level (i.e. indented to be on the same level as a tile), not the vertical stack level.

Don’t ask me why… maybe DOM path needs to be defined differently, maybe something else. I’ve had enough, don’t want to play with it anymore.