custom-cards / button-card

❇️ Lovelace button-card for home assistant
MIT License
1.95k stars 236 forks source link

Color not working for certain mdi icons. #450

Open ghost opened 3 years ago

ghost commented 3 years ago

Checklist

Describe the bug Cannot apply colors to icons; mdi:volume-mute mdi:volume-minus mdi:volume-plus

Version of the card Version: v3.4.2

To Reproduce This is the configuration I used:

type: vertical-stack
cards:
  - type: picture
    image: 'http://192.168.1.30:8123/local/images/tvcontrols.png'
    tap_action:
      action: none
    hold_action:
      action: none
  - type: grid
    card-background-color: 'rgba(66, 66, 66, 0.0)'
    cards:
      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color: 'rgb(160, 160, 160)'
            styles:
              card:
                - height: 47px
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                entity_id: remote.broadlink_remote
                device: comcast
                command: infobutton
            name: Info
            show_icon: false
            entity: remote.broadlink_remote
          - type: 'custom:button-card'
            color: 'rgb(255, 255, 160)'
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                entity_id: remote.broadlink_remote
                device: lgtv
                command: settingsbutton
            icon: 'mdi:cog-box'
            styles:
              card:
                - height: 57px
            name: Settings
            hold_action:
              action: none
          - type: 'custom:button-card'
            color: 'rgb(204, 255, 255)'
            styles:
              card:
                - height: 57px
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                entity_id: remote.broadlink_remote
                device: lgtv
                command: leftarrow
            icon: 'mdi:chevron-left-box'
            icon_height: 25px
            name: Left
          - type: 'custom:button-card'
            color: 'rgb(255, 255, 160)'
            styles:
              card:
                - height: 57px
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                entity_id: remote.broadlink_remote
                device: lgtv
                command: backbutton
            icon: 'mdi:keyboard-return'
            icon_height: 25px
            name: Back
          - type: 'custom:button-card'
            color: 'rgb(160, 160, 160)'
            styles:
              card:
                - height: 47px
            tap_action:
              action: toggle
            icon: 'mdi:volume-minus'
            icon_height: 25px
            name: Down
            show_name: false
            entity: script.tv_volume_down
      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color: 'rgb(28, 128, 199)'
            styles:
              card:
                - height: 47px
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                entity_id: remote.broadlink_remote
                device: lgtv
                command: homebutton
            show_icon: false
            name: Home
            entity: remote.broadlink_remote
          - type: 'custom:button-card'
            color: 'rgb(204, 255, 255)'
            styles:
              card:
                - height: 57px
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                entity_id: remote.broadlink_remote
                device: lgtv
                command: uparrow
            icon: 'mdi:chevron-up-box'
            icon_height: 25px
            name: Up
          - type: 'custom:button-card'
            color: 'rgb(255, 229, 204)'
            styles:
              card:
                - height: 57px
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                entity_id: remote.broadlink_remote
                device: lgtv
                command: okbutton
            icon: 'mdi:circle'
            icon_height: 25px
            name: OK
          - type: 'custom:button-card'
            color: 'rgb(204, 255, 255)'
            styles:
              card:
                - height: 57px
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                entity_id: remote.broadlink_remote
                device: lgtv
                command: downarrow
            name: Down
            icon: 'mdi:chevron-down-box'
            icon_height: 25px
          - type: 'custom:button-card'
            color: 'rgb(255, 255, 160)'
            styles:
              card:
                - height: 47px
            tap_action:
              action: toggle
            icon: 'mdi:volume-plus'
            icon_height: 25px
            show_name: false
            name: Up
            entity: script.tv_volume_up
      - type: vertical-stack
        cards:
          - type: 'custom:button-card'
            color: 'rgb(28, 128, 199)'
            styles:
              card:
                - height: 47px
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                entity_id: remote.broadlink_remote
                device: lgtv
                command: powerbutton
            show_icon: false
            name: Power
            entity: remote.broadlink_remote
          - type: 'custom:button-card'
            color: 'rgb(255, 255, 160)'
            styles:
              card:
                - height: 57px
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                entity_id: remote.broadlink_remote
                device: lgtv
                command: inputbutton
            icon: 'mdi:video-input-hdmi'
            icon_height: 25px
            name: Input
          - type: 'custom:button-card'
            color: 'rgb(204, 255, 255)'
            styles:
              card:
                - height: 57px
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                entity_id: remote.broadlink_remote
                device: lgtv
                command: rightarrow
            icon: 'mdi:chevron-right-box'
            icon_height: 25px
            name: Right
          - type: 'custom:button-card'
            color: 'rgb(255, 255, 160)'
            styles:
              card:
                - height: 57px
            tap_action:
              action: call-service
              service: remote.send_command
              service_data:
                entity_id: remote.broadlink_remote
                device: lgtv
                command: exitbutton
            icon: 'mdi:close'
            icon_height: 25px
            name: EXIT
          - type: 'custom:button-card'
            color: 'rgb(255, 255, 160)'
            styles:
              card:
                - height: 47px
            tap_action:
              action: toggle
            show_name: false
            entity: script.mute_tv
            icon: 'mdi:volume-mute'
            name: Mute
  - type: picture
    image: 'http://192.168.1.30:8123/local/images/divider small.png'
    tap_action:
      action: none
    hold_action:
      action: none

Screenshots If applicable, add screenshots to help explain your problem.

Expected behavior A clear and concise description of what you expected to happen.

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context These particular icons seem to remain the default color of my theme and do not change when a color is specified.

RomRider commented 3 years ago

Instead of using color: xxxx move it to:

styles:
  icon:
    - color: rgb(x, y, z)