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

Hey guys,

I have been trying for some days to find out what the issue ist but I am not able to solve the problem. I hope some of you guys can help me out.

I’m trying to create a card with an icon on the left side of the card. Therefore, I’m using the card_mod to adjust the margin but on matter what I’m filling out nothing happens. It’s like something is overwriting it or the card_mod isn’t working at all.

Here is the code:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Lounge
    secondary: "{{ states(\"sensor.wohnzimmer_dg_heizung\") | round(0) }} °C"
    icon: mdi:sofa
    fill_container: false
    layout: horizontal
    multiline_secondary: false
    card_mod:
      style: |
        :host([dark-mode]) {
          background-blend-mode: darken;
        }
        :host {
          background-image: url('/local/lounge.jpg') , linear-gradient(to right, rgba(var(--rgb-card-background-color), 1), rgba(var(--rgb-card-background-color), 0));
          background-size: 50% 100%;
          background-position: right;
          background-repeat: no-repeat;
          --mush-icon-size: 76px;
          height: 66px;
          margin-left: -28px !important;
        }

I have HA 2024.11.1 installed and also card-mod 3.4.3