Thermostat card preset mode feature not showing icons

[cryptk]

Checklist

• [X] I have updated to the latest available Home Assistant version.
• [X] I have cleared the cache of my browser.
• [X] I have tried a different browser to see if it is related to my browser.
• [X] I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

The thermostat card, with the "Climate preset modes" feature enabled, does not show proper icons for the various preset modes, only dots. This makes the "icons" style almost useless as the buttons cannot be differentiated from each other.

This appears to be caused because the preset modes for an Ecobee thermostat are capitalized "Home", "Sleep", etc and the pattern matching to determine what icon to use only works for the lowercase version of those words. If I edit the state for the climate entity to have the preset modes in all lowercase, then re-configure the card, the icons appear. This only lasts until the next time the integration updates of course, so it's great for validating the problem, but it is not a long term solution.

Describe the behavior you expected

Proper icons should be shown for the preset modes regardless of casing. Adjusting the Ecobee integration to return the preset modes in lowercase is not a great long-term solution as users can add custom preset modes to many thermostats, and the casing that the end-user provides should be preserved (which is the current behavior of the Ecobee integration).

Steps to reproduce the issue

1. Configure a climate entity that supports preset modes
2. Ensure the entity state has the preset modes capitalized (Home, Sleep, etc)
3. Configure the thermostat card to show preset modes
4. Observe the lack of icons, they are all replaced with just dots

What version of Home Assistant Core has the issue?

2023.12.4

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Firefox 121.0, Android Companion 2023.12.4-full

Which operating system are you using to run this browser?

Andriod, Ubuntu 23.10, Windows 11

State of relevant entities

hvac_modes:
  - heat_cool
  - heat
  - cool
  - "off"
min_temp: 44.6
max_temp: 95
target_temp_step: 0.5
fan_modes:
  - auto
  - "on"
preset_modes:
  - Home
  - Away
  - Sleep
supported_features: 27
current_temperature: 74.6
target_temp_high: 80
target_temp_low: 75
current_humidity: 41
fan_mode: auto
hvac_action: idle
preset_mode: temp
fan: "off"
climate_mode: Home
equipment_running: ""
fan_min_on_time: 0
friendly_name: Downstairs

Problem-relevant frontend configuration

type: thermostat
entity: climate.downstairs_2
features:
  - type: climate-hvac-modes
    hvac_modes:
      - heat_cool
      - heat
      - cool
      - 'off'
  - style: icons
    preset_modes:
      - Home
      - Away
      - Sleep
    type: climate-preset-modes

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

[piitaya]

In a future release, each integration will be able to provide icon for custom presets : https://github.com/home-assistant/architecture/discussions/980.

users can add custom preset modes to many thermostats

Do you have an example of integration with this capability? Ecobee? How does it works if the user has the Ecobee app in another language? Are the preset mode translated in this language?

[cryptk]

Do you have an example of integration with this capability? Ecobee? How does it works if the user has the Ecobee app in another language? Are the preset mode translated in this language?

Ecobee can have custom preset modes, you can't add them through the Home Assistant integration currently, but you can add them in the Ecobee app (it calls them Comfort Settings). By default it has Home, Away and Sleep, but you can create as many as you like, and they will appear as options in Home Assistant.

There is no translation applied to them in Home Assistant, they are rendered exactly as the user enters them and presumably the user would create them in their own native language, so there is no translation necessary.

Having the dots for these custom ones is fine, but the frontend should be able to properly show the house icon for "Home" just as it does for "home".

Mentioning the custom preset names was just to show why punting this to an "integration problem" of "the integration should be returning the values in all lowercase" is not a good solution as the integration should be returning the preset names as they actually exist in the device, especially since users can create these preset modes on their own and whatever casing they determine is appropriate is what should be used.

[cryptk]

Apologies, I think I misunderstood the language part of your comment. I think you were asking if you change the language of the Ecobee to something else (ex: French) do the preset mode named change (ex: Maison).

As far as I can tell, there is no way for me to change the language of my Ecobee away from English

[cryptk]

It looks like this could be resolved by updating https://github.com/home-assistant/frontend/blob/dev/src/data/climate.ts#L164 to include a line such as mode = mode.toLowerCase() just before the check to see if the current preset mode is in the CLIMATE_PRESET_MODE_ICONS record. This would allow the default/built-in icons to match a preset mode regardless of the casing of the preset mode. You would get the mdiHome icon no matter if the current preset mode was "home", "Home" or "HOME".

[piitaya]

It is not the role to front-end to do this. If ecobee integration wants to use icons and translations from officially supported presets, the mapping must be done in core, not in front-end. Otherwise, it will be consider as a custom preset.

[cryptk]

So the preference here would be to have the integration change the casing of the preset name, despite the preset name actually being named "Home"? It's not allowable to have the name matching for the icons be case insensitive?

I just want to make sure I have that correct before I raise an issue with the integration, and hopefully they won't punt me back here saying that it's a frontend issue

[piitaya]

The front-end is not responsible of the integration issue. If the integration want to use translations and icons, it have to map it to the right presets (https://developers.home-assistant.io/docs/core/entity/climate/#presets)

[slingshot74]

I have the same issue. No icons for the fan mode because the nodes are in uppercase. The data is coming from an LG airco.

Is there anyway I can solve this myself? Would be nice if in the feature yaml you can per mode specify the icon

[karwosts]

No I don't think there's any way for an end user to customize the icons. What integration provides your climate?

If it's an integration specific to that device someone could PR an icons translations file for that integration, though if it's something generic like zigbee or MQTT I'm not sure how to customize icons in that case.

[GitHubGoody]

+1 for @slingshot74.

I pull three thermostats into HA via Infinitude (a Carrier proxy) and a custom component that brings them into HA. I thought 2024.2 would fix this, but I still get 7 dot icons for the preset modes on the tile climate card. Everything else with this integration works pretty well, but I don't think the owner is maintaining the custom component any longer. I could branch and add whatever was necessary with a few pointers, but it would be great if this could be adjusted in the card config. Plus, I may want a different icon for certain presets on different thermostats and this would allow for that level of customization as well.

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.