Set Button Color

Configuration Frontend
1

Hey Everyone, I am trying to build a dashboard with navigation to the other pages which I have done. What I would like to do is change the icon color of each button. For some reason, nothing I am doing is changing the color. It just stays the same.

My question is this… what is the best way to set your button icon’s color? I have HACS with card-mod and button-card if that helps. Thank you in advance for your time.

2 Likes
2

Both card-mod and button-card should allow you to change the icon color.
In button-card, as you’re defining the card, just put a section in that looks like this:

    styles:
      icon:
        - color: lightBlue

Or you can set the color programmatically:

      icon:
        - color: |
            [[[
              if (entity.state == 'some') return 'white';
              if (entity.state == 'none') return 'lightGrey';
              else return 'yellow';
            ]]]
4 Likes
3

Thanks for your help! The color changed but I’m using it in a grid and it cut the size in half. Any idea if that’s fixable?

ss

4

Cancel that, I figured it out. Thanks again for your help and time! I’ve been going crazy.

In case anyone stumbles on this down the road:

styles:
  icon:
    - color: red
  card:
    - height: 100%
1 Like
5

Hi, is it possible to change the icon color (based on the entity status) of the Home Assistant “Button” card?

Thanks

show_name: true
show_icon: true
type: button
tap_action:
  action: toggle
double_tap_action:
  action: none
hold_action:
  action: none
entity: light.luce_scala
show_state: true
icon: hass:wall-sconce
6

I don’t know if you can do it with the regular button card but I know you can with custom button card in HACS. You can have different colors for each state.

7

Yes I imagined that. I just wanted to know if it is possible to do it with the Home Assistant card, without installing additional components.

1 Like