Icon mapping - expose mdi icon translation as attribute

[bakman2]

Did you read the instructions?

• [X] I have read the README, including the known-limitations section.

The request

When weather.knmi_home returns partlycloudy this cannot directly be mapped to an mdi icon as the mdi is: mdi-weather-partly-cloudy, this means when creating a dynamic dashboard with an icon from mdi, nothing will show.

Request: please add an icon attribute to the weather.knmi_home with the translated mapping ie. something like icon: partly-cloudy, so that no manual mappings/translations are required

Additional information

No response

[golles]

Please elaborate on your request, because I don't understand what you are trying to achieve.

Please note that the icons are determined based on the weather state by Home Assistant, here you can see the mapping from state to JS icon name, https://github.com/home-assistant/frontend/blob/dev/src/data/weather.ts#L102-L118

[bakman2]

To clarify:

Example: weather.knmi_home returns partlycloudy, the mdi icon is: weather-partly-cloudy (note the - between partly-cloudy)

If you want to create a custom dashboard, you cannot show an icon, unless you manually translate partlycloudy to partly-cloudy. So the request is to add this as a custom attribute so that no manual translation is required.

See this old issue.

to illustrate using a tailwind-template card:

<ha-icon icon="mdi:weather-{{ states('weather.knmi_home') }}"></ha-icon>

[golles]

This component shouldn't set an icon attribute, as I mentioned this is all handled by Home Assistant. Your linked issue is also not in the interest of HA, see this comment: https://github.com/home-assistant/architecture/issues/321#issuecomment-602121410 Which makes sense, if you want to do something different than what is standard, you need to do that yourself. For example adding a mapping to your template, something like this:

{% set weather_icons = {
  "clear-night": "mdi:weather-night",
  "cloudy": "mdi:weather-cloudy",
  "exceptional": "mdi:alert-circle-outline",
  "fog": "mdi:weather-fog",
  "hail": "mdi:weather-hail",
  "lightning": "mdi:weather-lightning",
  "lightning-rainy": "mdi:weather-lightning-rainy",
  "partlycloudy": "mdi:weather-partly-cloudy",
  "pouring": "mdi:weather-pouring",
  "rainy": "mdi:weather-rainy",
  "snowy": "mdi:weather-snowy",
  "snowy-rainy": "mdi:weather-snowy-rainy",
  "sunny": "mdi:weather-sunny",
  "windy": "mdi:weather-windy",
  "windy-variant": "mdi:weather-windy-variant"
} %}

<ha-icon icon="{{ weather_icons[states('weather. knmi_home')] }}"></ha-icon>

(I haven't checked if this is 100% correct)

[bakman2]

I give up, you either don't understand or don't want to understand.