viscid wigeon
Hello, I´m using Custom:Button-Card and I´m trying to select and svg as as icon.
icon: |-
[[[
return '<img src="' + entity.state + '" width="50" height="50"/>'
]]]
In other sections (name or label) the code runs fine, but with icon it return an "Eye icon".
Anyone can help me understanding what is hapenning?
Many thanks
tired sorrel
It looks like you're trying to stuff HTML into an icon field, I don't think that's valid?
I assumed icon wants a string like mdi:whatever
Maybe try using entity_picture instead of icon?
fossil igloo
In the simplest form, like karwosts mentioned, you need to use entity_picture instead of icon. yaml type: custom:button-card entity_picture: "/local/rainy-1.svg" show_entity_picture: trueThe .svg is located in the /config/www/ folder which is mapped to /local/.
When you want to "manipulate" the filename and not use a simple string, you need to use a return. Here, I've used variables to help make the code a bit more readable. Note the use of backticks around the variables in the return; those are not single quotation marks. yaml type: custom:button-card variables: path: "/local/" entity_picture: '[[[ return `${variables.path}rainy-1.svg` ]]]' which can be expanded to handle more variables:yaml type: custom:button-card variables: path: "/local/" file: "rainy-1.svg" entity_picture: "[[[ return `${variables.path}${variables.file}` ]]]" show_entity_picture: true
Here, I've added a placeholder for the state string which will get used in the SVG filename. Note that I dropped the .svg from the file variable but added it inline with the return. yaml type: custom:button-card variables: path: "/local/" file: "rainy-" state: "1" entity_picture: "[[[ return `${variables.path}${variables.file}${variables.state}.svg` ]]]" show_entity_picture: true