Set Button Color

Configuration
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.

1 Like
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';
            ]]]
3 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