🔹 Card-mod - Add css styles to any lovelace card

[Ildar_Gabdullin]

For people who are still using badges:

I realized that we can replace icons for badges - even if badges do not have badges displayed.
For example, this badge has an icon displayed:

badges:
  - entity: sun.sun

And this badge does not have an icon:

badges:
  - entity: sensor.cleargrass_1_co2

We can replace an icon for the 1st badge:

badges:
  - entity: sun.sun
    icon: mdi:home

And also we can do it for the 2nd badge:

badges:
  - entity: sensor.cleargrass_1_co2
    icon: mdi:home

Why it could be useful?
Suppose we have a sensor whose badge is with no icon displayed (like that “CO2” badge) - and then we need to display an icon dynamically (dependingly on some conditions).
To achieve this, we need to:

• add an icon first by “icon: something” (this particular icon will not be displayed);
• replace this icon by card-mod by using templates:

      - entity: sensor.cleargrass_1_co2
        icon: mdi:home  ###creates a placeholder
        card_mod:
          style: |
            :host {
              {% if states(config.entity) | int > 600 %}
              --card-mod-icon: mdi:fire;
              {% else %}
              --card-mod-icon: mdi:leaf;
              {% endif %}
            }

---

One of possible usage - showing an icon for a season badge.
By default the season badge shows a current state:

badge:
  - entity: sensor.season

Here is how to change it:

badges:
  - entity: sensor.season
    icon: mdi:home
    card_mod:
      style: |
        :host {
          {% set season = states(config.entity) %}
          {% set icon =
            {
              'winter':'mdi:snowflake',
              'spring':'mdi:flower',
              'summer':'mdi:sunglasses',
              'autumn':'mdi:leaf'
            } %}
          {% set icon_color =
            {
              'winter':'rgb(138,180,248)',
              'spring':'rgb(106,168,79)',
              'summer':'rgb(0,0,0)',
              'autumn':'rgb(255,126,0)'
            } %}
          {% set border_color =
            {
              'winter':'rgb(138,180,248)',
              'spring':'rgb(106,168,79)',
              'summer':'rgb(230,145,56)',
              'autumn':'rgb(255,126,0)'
            } %}
          {% set back_color =
            {
              'winter':'rgb(255,255,255)',
              'spring':'rgb(216,251,135)',
              'summer':'rgb(255,242,204)',
              'autumn':'rgb(252,229,205)'
            } %}
          --card-mod-icon: {{ icon[season] if season in icon else 'mdi:home' }};
          --label-badge-text-color: {{ icon_color[season] if season in icon_color else 'var(--paper-item-icon-color)' }};
          --label-badge-red: {{ border_color[season] if season in border_color else 'red' }};
          --label-badge-background-color: {{ back_color[season] if season in back_color else 'white' }};
        }

Probably you may find more nice color combinations )))

---

Another case is - show either an icon or a value:
post

---

More examples are described here.