Trying to modify icon colors, but can't seem to hit the icon for some reason

Configuration
1

I have this card:

type: custom:auto-entities
card:
  type: grid
  columns: 5
  title: Sikkerhed
card_param: cards
filter:
  exclude:
    - name: '*ullegardin*'
    - name: '*lind*'
    - name: '*over*'
    - name: '*ryser*'
    - name: '*ridge*'
    - name: '*reezer*'
    - name: Z-Wave*
    - name: Magic*
    - name: Hoveddør lås
  include:
    - domain: lock
      options:
        type: button
        tap_action: none
        card_mod:
          style: |
            :host {
              --paper-item-icon-color: #277327;
              --paper-item-icon-active-color: #aa1010;
    - attributes:
        device_class: window
      options:
        type: button
        tap_action: none
        card_mod:
          style: |
            :host {
              --paper-item-icon-color: #277327;
              --paper-item-icon-active-color: #aa1010;
      sort:
        method: name
    - attributes:
        device_class: door
      options:
        type: button
        tap_action: none
        card_mod:
          style: |
            :host {
              --paper-item-icon-color: #277327;
              --paper-item-icon-active-color: #aa1010;
      sort:
        method: name
show_empty: false

This shows open door and windows, and if they are closed it should be shown in green, and if it’s open it should be shown in red.
But after the latest updates, the colors are just standard template colors like grey and blue.

If I go and look at the the web tools, I can see that the ‘ha-state-icon’ is the one I should hit, but if I do that nothing changes.
I’m not a CSS expert in any sort of way, so what does this mean:

image

Any ideas out there?

2

Try to check your browser’s developer tools (usually by pressing F12)
It might show what CSS element you need to alter.

3

Hmm, that was sort of what I did :smiley:, the last image, where I can see the color is set, but in front of it, it’s grey, and I can’t figure out what that means?

4

Hmm, you are using a custom card to list entities, but if you can use host: on that is a bit tricky to establish.
Try to remove host: and see if that makes a difference.

Maybe others can tell you more about the custom card you are using.

An alternative could also be to make the card in jinja instead.

5

Just stumbled on a link to the Github page for the Auto-entities card and its Thomas Lovén that is the author of that.
Thomas Lovén just happens to be the author of Card-mod too, so he might possibly be able to help you.
Make a post on the github page and wait for a response.

6

You forgot the closing bracket

7

Well, that didn’t change anything, thanks anyways all, I’m going to try and ask on github

8

I had the same and changed to ha-card instead of :host
This made it work for my buttons:

style: |
  ha-card {
    --paper-item-icon-color:
9

Surely ha-card should be used instead of :host

10

:host used to work, but indeed, with recent changes, it stopped working.

11

Hmm, didn’t change anything :cry:

13

Here’s one that works for me:

type: button
tap_action:
  action: call-service
  service: switch.toggle
  service_data: {}
  target:
    entity_id: switch.hue_smart_plug
entity: sensor.hue_smart_plug
show_name: false
show_state: true
icon_height: 50px
style: |
  ha-card {
    --paper-item-icon-color:
        {% if is_state('switch.hue_smart_plug','on') %}#aa1010
        {% else %}#277327
        {% endif %}
      ;
  }
14

Make an MWE, try it & then post it here if it does not work.
I simulated your case, it definitely works with ha-card.

15

Huh, whats that ??

16

MWE = Minimal Working Example (Less often used abbreviation. Normally PoC (Proof of Concept) is used)

17

Ok, I’m used to poc’s, never heard the other expression :smiley:

18

Ahh, just noticed the problem. On the host I had : in front of it, removing it fro the ha-card made it work :slight_smile: