Hi everyone, I’m reaching out to see if anyone has encountered and resolved an issue similar to mine. I recently set up a weather dashboard in Home Assistant using a custom button-card to display weather conditions. While the temperature and weather descriptions are working perfectly, I’m having trouble getting the SVG icons to display correctly. Instead of the desired weather icons, I’m seeing a default ‘eye’ icon, which is both confusing and visually unappealing.
Here’s what my current setup looks like:
yaml
type: custom:button-card
entity: sensor.weather_info
name: |
[[[ return states[‘sensor.blitzwolf_bw_is4_temperature’].state + ‘°C’ ]]]
label: |-
[[[ return states[‘weather.openweathermap’].attributes.temperature + ‘°C’ ]]]
show_label: true
customs_fields:
icon: |-
[[[ return ‘
’ ]]]
styles:
grid:
- grid-template-areas: ““i n”” ““i l””
card:
- overflow: visible
- background: none
- padding-right: 8px
name:
- justify-self: end
- font-size: 14px
label:
- justify-self: start
- font-size: 26px
- font-weight: 500
customs_fields:
icon:
- justify-self: end
- align-self: end
- padding-right: 10px
- margin-bottom: “-11px”
Interestingly, when I test the same SVG code in the label section, it works perfectly. For example:
yaml
label: |-
[[[ return ‘’ ]]]
This successfully displays the weather icon as intended. However, when I apply the same logic to the icon section, it defaults to the ‘eye’ icon. I’ve double-checked the file paths and permissions, and everything seems to be in order. The SVG files are stored in /local/weather/, and I’ve confirmed that they’re accessible through the browser.
I’m wondering if there’s a specific setting or configuration I’m missing that would allow the icon to display correctly. Could there be a conflict with other card styles or customizations? I’m also curious if others have faced similar issues and how they resolved them.
Any insights or suggestions would be greatly appreciated! I’m eager to get this working smoothly so I can have a cohesive and visually appealing weather dashboard.