I have a set of decluttering button templates that I am using for a tablet view.
The fact that I can change icons with a variable is great. However, I have discovered that I can only pass the name of the icon and not the owner (eg mdi:).
An example is:
special_led_integrated_button_standard_template:
card:
type: custom:button-card
name: "[[name]]"
entity: "[[entity]]"
` icon: mdi:[[icon]]`
template: standard
aspect_ratio: 1/1.2
styles:
card:
- height: 58px
- width: 53px
name:
- color: black
icon:
- color: "[[[ states['[[entity]]'].attributes['[[attribute]]']; ]]]"
For this button, I can pass the icon name and all works well.
- type: custom:decluttering-card
template: special_led_integrated_button_standard_template
variables:
- entity: light.tv_backlight
- name: TV<br/>Backlit
- icon: led-strip-variant
- attribute: rgb_color
The issue I have is that I am now using other icon sets including my own set of bespoke icons.
With custom sets, these have different prefixes as the sets have their own name in js. For example, my own set are “mwi:” icons rather than the default “mdi:” set.
I thought I could change my decluttering card to have the icon variable defined as follows:
(correction of typo below)
icon: [[icon]]
Then i could pass the variable:
- icon: mdi:led-strip-variant
This does not work. No icon is displayed on the button, even if I add quotes. This would mean that I would need copies of every decluttering template where I was using a different icon set and that part hard-coded for each… Any ideas if this can be circumvented? My thoughts are that it may need a template in the card that also accepts an [[icon_set]] variable and builds an icon name accordingly. However, I am not sure what code could work and whether there is a simpler way?