Change Dashboard Card icon color

Configuration Frontend
1

I’m trying to change the icon associated w/ each color of ink cartridge in my printer. I’ve read a number of threads, tried some code, and cannot get the colors.

Card:
printer-card

My code:

entities:
  - entity: sensor.hp_laserjet_200
    name: Status
    secondary_info: none
  - entity: sensor.hp_laserjet_200_black_cartridge_hp_cf210x
    name: Black Ink
  - entity: sensor.hp_laserjet_200_cyan_cartridge_hp_cf211a
    name: Cyan Ink
  - entity: sensor.hp_laserjet_200_magenta_cartridge_hp_cf213a
    name: Magenta Ink
  - entity: sensor.hp_laserjet_200_yellow_cartridge_hp_cf212a
    name: Yellow Ink
title: Printer
type: entities
state_color: false

Code I’ve tried:

    styles:
      icon:
        - color: black;
2

You may try using card-mod to set colors for icons.
Thread is here.
Go to 1st post → link at the bottom → styles for Entities card - > find how to change colors for icons.

3

Thank you. I have card-mod and tried some of the code. Maybe I need to run thru again.

Seems the below code works, though the editor is throwing an error saying visual editor is not supported…

    card_mod:
    style: |
      :host {
        --card-mod-icon-color: cyan;
      }
1 Like
4

Probably because you forgot indentation:

  card_mod:
    style: |
      :host {
        --card-mod-icon-color: cyan;
      }
6

Yep, got it right, thanks…

entities:
  - entity: sensor.hp_laserjet_200
    name: Status
    secondary_info: none
  - entity: sensor.hp_laserjet_200_black_cartridge_hp_cf210x
    name: Black Ink
    card_mod:
      style: |
        :host {
          --card-mod-icon-color: black;
        }
7

A bit advanced version:

type: entities
entities:
  - entity: input_number.test_level_1
    name: cyan
    icon: mdi:circle
    card_mod:
      style:
        hui-generic-entity-row $ state-badge $ ha-state-icon $ ha-icon $ ha-svg-icon $: |
          svg {
              fill: rgba(0,255,255,{{states(config.entity)|float/100}});
              stroke: var(--state-icon-color);
            }

  - entity: input_number.test_level_4
    name: magenta
    icon: mdi:circle
    card_mod:
      style:
        hui-generic-entity-row $ state-badge $ ha-state-icon $ ha-icon $ ha-svg-icon $: |
          svg {
              fill: rgba(255,0,255,{{states(config.entity)|float/100}});
              stroke: var(--state-icon-color);
            }

  - entity: input_number.test_level_5
    name: yellow
    icon: mdi:circle
    card_mod:
      style:
        hui-generic-entity-row $ state-badge $ ha-state-icon $ ha-icon $ ha-svg-icon $: |
          svg {
              fill: rgba(255,255,0,{{states(config.entity)|float/100}});
              stroke: var(--state-icon-color);
            }

image

image

2 Likes
8

Very nice… the color opacity even changes!

9

In addition to your nice icons I would suggest changing the sliders to something more representative like these bars:
image

type: custom:bar-card
title: Epson ET 3750
entities:
  - entity: sensor.epson_et_3750_series_black_ink
    color: black
  - entity: sensor.epson_et_3750_series_yellow_ink
    color: '#fab300'
  - entity: sensor.epson_et_3750_series_cyan_ink
    color: '#00cccc'
  - entity: sensor.epson_et_3750_series_magenta_ink
    color: magenta

I got this card from HACS (or Github)

1 Like
10

Very nice, thanks!

Edit: I wish I could combine the two, but doesn’t seem like I can add card_mod to the config.

Edit 2: BTW, welcome to HA!