Custom icons for custom Humidifier modes

[ncd]

I’m creating a custom humidifier entity with a custom set of modes. It works but the custom mode’s icons in Mode dropdown in the more-info card show up with “dot” icons (I assume some default) and I’d like to set them to some custom icons but I have not been able to identify what property / def I need to override or set in my python code to accomplish this.

I’ve tried going through the docs on my own and also asked LLMs but the answers are always garbage. The manual search isn’t showing much.

Eg I’m getting this

Thanks!

[karwosts]

Icons will be set in icons.json (similarly to strings.json for labels). Here’s an example from the default humidifier:

{
  "entity_component": {
    "_": {
      "default": "mdi:air-humidifier",
      "state": {
        "off": "mdi:air-humidifier-off"
      },
      "state_attributes": {
        "action": {
          "default": "mdi:circle-medium",
          "state": {
            "drying": "mdi:arrow-down-bold",
            "humidifying": "mdi:arrow-up-bold",
            "idle": "mdi:clock-outline",
            "off": "mdi:power"
          }
        },
        "mode": {
          "default": "mdi:circle-medium",
          "state": {
            "auto": "mdi:refresh-auto",
            "away": "mdi:account-arrow-right",
            "baby": "mdi:baby-carriage",
            "boost": "mdi:rocket-launch",
            "comfort": "mdi:sofa",
            "eco": "mdi:leaf",
            "home": "mdi:home",
            "normal": "mdi:water-percent",
            "sleep": "mdi:power-sleep"
          }
        }
      }
    }
  },
...
}

[ncd]

thanks very much, interesting! so it’s not possible to do this programmatically? kind of need to hardcode it in that file? e.g. if i want to make it templetizeable, not possible?

[karwosts]

No I don’t think there’s any dynamic/templating possibility.

[ncd]

I tried replicating this exactly in my custom component’s folder but it didn’ take. I also tried renaming entity_component to entity as well as being explicit about it being a humidifier domain but nothing worked

[karwosts]

Try looking at other core humidifier integrations that have icons and see how they structure it. Or check docs:

Entity | Home Assistant Developer Docs

[ncd]

That’s exactly the page I was looking at but that’s woefully handwavy. I want specifics on exactly where to put the file, exactly what API to override to point to that file. It’s all super loose on details and clicking through the links doesn’t give me anything specific. Anyway, it’s good to see you’re pointing me to where I’ve been looking so the key is there. I’ve tried a few variations and none have worked.

[ncd]

I haven’t been able to make this work but I’ll mark your original icons answer as the solution. I don’t know if I’ll be able to but it’s more on me

[ncd]

Been playing with it for hours, still cannot get it to work (ie for HA to honor it). Giving up…

[dcapslock (Darryn Capes-Davis)]

If you really want a solution you can get there with card_mod. See below for what I have tested with fan_modes for climate. This sets both the selected icon and the icons in the fan_modes menu. Happy to provide any further assistance.]

Note the index into config.features may differ. In my case I have fan_modes as the 2nd feature. If it was the first your index will be 0, not 1 etc.

type: vertical-stack
cards:
  - type: thermostat
    entity: climate.air_conditioner
    features:
      - type: climate-hvac-modes
        hvac_modes:
          - "off"
          - heat
          - dry
          - cool
          - fan_only
          - heat_cool
      - style: dropdown
        fan_modes:
          - low
          - medium
          - high
        type: climate-fan-modes
        icons:
          - mdi:numeric-1-box
          - mdi:numeric-2-box
          - mdi:numeric-3-box
    card_mod:
      style:
        hui-card-features $:
          hui-card-feature $:
            hui-climate-fan-modes-card-feature $: |
              ha-attribute-icon[slot="icon"] { 
                {% set iconIndex = config.features[1].fan_modes.index(state_attr(config.entity, 'fan_mode')) %}
                --card-mod-icon: {{ config.features[1].icons[iconIndex] }};
              }
              {% for fan_mode in config.features[1].fan_modes %}
              ha-list-item:nth-child({{ loop.index + 1 }}) > ha-attribute-icon {
                --card-mod-icon: {{ config.features[1].icons[loop.index0] }};
              }
              {% endfor %}

[ncd]

I think the issue is all those json mechanisms only work for very few attributes of specific domains. They just don’t work for the humidifier domain on the current version of HA at least. Very limited tool

Card mod doesn’t work for me because I also need the change to the more info popup card and I have no desire to replace it using eg browser mod. At this point that’ll be accumulating tons of complexity to solve a very minimal aesthetic issue

Thanks for the comment though I appreciate it

[dcapslock (Darryn Capes-Davis)]

card_mod can work with more-info via theme. In this case I have adjusted fan_modes and icons to be in the jinja template for card_mod. This is actually easier in application, but more involved in that you need to use a theme.

card_mod theme yaml. Once everything is good you can remove the Jinja comment that sets debug to the template {# card_mod.debug #}

Note: ha-control-select-menu:nth-child(2) is the fan modes. You could style the hvac modes with ha-control-select-menu:nth-child(1) and adjust template to suit

My Themet:
  card-mod-theme: My Theme
  
  card-mod-more-info-yaml: |
    ha-more-info-info $:
      more-info-content $:
        more-info-climate $:
          .: |
            {# card_mod.debug #}
            {% set fan_modes = [ "low", "med", "high" ] %}
            {% set icons = [ "mdi:numeric-1-box", "mdi:numeric-2-box", "mdi:numeric-3-box" ] %}
            ha-control-select-menu:nth-child(2) ha-attribute-icon[slot="icon"] { 
              {% set iconIndex = fan_modes.index(state_attr(config.entityId, 'fan_mode')) %}
              --card-mod-icon: {{ icons[iconIndex] }};
            }
            {% for fan_mode in fan_modes %}
            ha-control-select-menu:nth-child(2) ha-list-item:nth-child({{ loop.index + 1 }}) > ha-attribute-icon {
              --card-mod-icon: {{ icons[loop.index0] }};
            }
            {% endfor %}