Icon color

[dowermyr]

Can't change some of my my cards ti different icon color. This is my card, that is underneath a grid card: - type: button entity: binary_sensor.garageoppnare_channel_1_input name: Garageport show_name: true show_state: true show_icon: true tap_action: action: call-service service: script.oppna_stang_garageport confirmation: text: öppna / Stäng ?

And this is the rows from the customize section; binary_sensor.garageoppnare_channel_1_input: templates: icon: > if (state === 'on') return 'mdi:garage-open-variant'; return 'mdi:garage-variant'; icon_color: > if (state ==='on') return 'red'; if (state ==='off') return 'green'; return 'green';

The icon is changing but the colors is just the standard ones with yellow when on

[Mariusthvdb]

please format your code correctly so we can check for any edit flukes

using:

    - type: button
      entity: input_boolean.test

in the frontend view, and

    input_boolean:
      templates:
        icon_color: >
          if (state === 'on') return 'var(--primary-color)';
          return 'steelblue';

btw, you use green twice, so you might just leave out the last condition (if) and return green if not 'on'

works just fine see below for conclusion: type: button isnt touched by custom-ui, and joins the entity card in that respect.

[dowermyr]

      - type: button
        entity: binary_sensor.garageoppnare_channel_1_input
        icon: mdi:garage-variant
        name: Garageport
        show_name: true
        show_state: true
        tap_action:
          action: call-service
          service: script.oppna_stang_garageport
          confirmation:
            text: öppna / Stäng ?

binary_sensor.garageoppnare_channel_1_input:
  templates:
    icon: >
      if (state === 'on') return 'mdi:garage-open-variant';
      return 'mdi:garage-variant';
    icon_color: >
      if (state ==='on') return 'red';
      return 'green';

Still not working. All other cards I have works

[Mariusthvdb]

I'd enter a space here:

(state ==='on')

but dont think that causes this to happen.

Also, you have a fixed button set in the button config, and yet template that in the customization. Take the icon out of the button config?

wait. I do believe you are correct. Can you please check the same entity in an entities card?

I have my on color set to the primary color, but that is also the color of accent-color: var(--primary-color) paper-item-icon-active-color: var(--primary-color)

type: button probably uses these color variables.

edit In fact, I believe it simply uses primary-color

[dowermyr]

Made the changes, but still doesn't work. But I can see the changes in the unit under configuration:

[Mariusthvdb]

yes, that confirms my suspicion. You'll see the color in a more-info card too, and in entities card. But not in an entity card, and, as you have established in a button card.

you can use a custom:button-card and use the support_custom_ui template (see my templates file), or, and that might be quicker, use a card_mod.

The latter wont color you entities in the more-info though, nor in the device panel...

Ive edited the readme and added custom card to the exceptions. thanks for reporting.

[dowermyr]

Having problems with card_mod. Can't find any info about support_custom_ui template

[Mariusthvdb]

https://gist.github.com/Mariusthvdb/2d59566b173c6d37bd986c213f77c348#file-button_card_templates-yaml-L400

use that in a custom: button-card and the icon_color attribute will be used

card_mod:

    - type: button
      entity: input_boolean.test
      card_mod:
        style:
          ha-state-icon:
            $: |
              ha-svg-icon {
                color: {{'red' if is_state('input_boolean.test','on') else 'green'}};
              }
          .: |
            ha-card {
              color: red;
            }

see @Ildar_Gabdullin 's post on entities and scroll way down