custom-cards / slider-button-card

A button card with integrated slider
MIT License
105 stars 16 forks source link

Change icon color #65

Closed SanderH030 closed 10 months ago

SanderH030 commented 10 months ago

Is there a way to change the color or the icon? Haven't found it yet.

I was trying to make it red (see code), unfortunately without any result.

image

Code:

type: custom:slider-button-card
entity: cover.ramen
slider:
  direction: left-right
  background: gradient
  use_state_color: true
  use_percentage_bg_opacity: false
  show_track: true
  toggle_on_click: false
  force_square: false
show_name: true
show_state: true
compact: true
icon:
  show: true
  use_state_color: true
  tap_action:
    action: more-info
  icon: mdi:curtains
  styles:
    icon:
      - color: '#FF0000'  # Red color code
action_button:
  mode: custom
  icon: mdi:curtains
  show: false
  show_spinner: true
  tap_action:
    action: toggle
name: Gordijnen
SanderH030 commented 10 months ago

Found it:

    style: |
      :host {
        --icon-color: rgba(255, 255, 255, 1) !important; /* White color */
      }
Barendgoes commented 10 months ago

If you want to do it based on state you can also do this @sanderhoeppermans

    style: |
      :host {
        --icon-color: {% if is_state('light.main_floor', 'on') %}rgba(255, 0, 0, 1){% else %}rgba(255, 255, 255, 1){% endif %} !important;
      }