Decluttering card template icon variables - cannot pass mdi:

Configuration Frontend
1

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?

2

See no logic here.
If an icon could be “xyz:some-icon” - then the template should contain

icon: '[[icon]]'

Besides, what is a point of using a decluttering card for a custom:button-card which supports templates & input variables itself?

button_card_template_xyz:
  variables:
    XYZ: ...
  icon: >-
    [[[ return variables.XYZ; ]]]

type: custom:button-card
template: button_card_template_xyz
variables:
  XYZ: mdi:card

Also, to avoid confusion suggest to use capitals for variables, like

some_decluttering_template:
  ...
  icon: '[[ICON]]'
3

That was a typo… sorry… corrected on original post and removed the mdi:

Fair point. I had the decluttering cards before I used custom:button-card and foolishly changed the declutter code to utilise this. Absolutely right that I should directly access custom:button-card and use that variable functionality. I have done that and understandably it works. I guess the only thing that remains is the question as to why decluttering cards caused the issue but no point in identifying an issue that is a result of compounded card templates. Thanks

4

Using decluttering-card for button-card is normal - but in a bit different scenario:

my_template:
  card:
    type: vertical-stack
    cards:
      - ...
      - type: custom:button-card
        ...

Means - the decluttering template is for some ANOTHER card which contains a button-card.
So, I would suggest you to find out what caused your issues - for learning.