Changing icon container size in a tile card using card mod in 2025.5

Configuration Frontend
1

Dear all,

My first post, please be gentle :slight_smile: I am a happy user of home assistant 2024.10 which does a lot that I like. Including modifiable icons, icon containers and such, which result in a touchscreen usable interface that I like.

afbeelding
afbeelding400×219 14.4 KB

I like this a lot, these are simple on/off buttons that I hacked together using node-red to work with my existing hardware. When you use this with a hue lamp you have different actions like controlling the lamp when you press the icon and just turning it on or off, when hitting the button.

I modded this with card-mod which worked great. The code I used to get this look is fairly simple

      - type: tile
        entity: switch.nodered_r1_output_2
        vertical: true
        name: Processing
        icon: mdi:music
        show_entity_picture: false
        tap_action:
          action: toggle
        card_mod:
          style:
            ha-tile-icon$: |
              .shape {
                background: rgba(0,0,0,1); !important;
                border-radius: 20% !important;
                height: 40px !important;
                width: 40px !important;
                margin-top: 0px !important;
                margin-bottom: -5px !important;
              #  margin-left: -5px;
              #  margin-right: -5px;        
                --mdc-icon-size: 40px;
              }

But off-course neither of this is working anymore in 2025 onwards. I downloaded and updated card-mode and HA, but I simply can not find a way to get this working again. I created another rPi with home assistant on it so I can do some testing without killing my current setup, but I can not get how to fix this. I asked Copilot and it only came with 2022 solutions (duh, those ARE working), but apparantly it also found somewhere that the new tilecards in 2025 have fixed icon-containers that are not editable anymore.
So what would be the solution, I have some issues reading the codes that I find in this forum so a simple solution would be much appreciated.

Thanks!
Twan

2

Use this mod code:

card_mod:
  style: |
    ha-tile-icon {
        background: black !important;
        border-radius: 20%;
       etc...
           }
3

Thanks for the reply. But is it even possible to adjust the icon-container? I like the tile-card because I can edit a lot of the properties (well not anymore). I think I already tried what you suggest, but I will try it this evening.

4

What I posted was in response to your attempt to adjust the Icons background, but yes the icon can be isolated and modded too.

image
image728×222 6.25 KB

card_mod:
  style: |
    ha-tile-icon {
        background: red !important;
        border: 2px solid white;
        border-radius: 50%;
        --tile-icon-color: yellow !important;
        --mdc-icon-size: 40px;
                      }
5

Thanks, appreciate it, going to try this and will let you know

6

Okay, I was trying it, but I notice that the icon-container isn’t changing, because a bigger icon still tries to fit in the small circle. On my 2024 instance, I can change that inner circle. But here I am merely creating a square behind the circle, but the icon doesn’t fit when I make it bigger.

afbeelding
afbeelding1033×555 21.9 KB

so I think I understand what you are saying (and I really appreciate it) but I want to change the icon-container (that small circle) and not the object behind it (black square).

7

Suggest to use Code inspector (or whatever it is called in your browser) to define a proper CSS element to style.

1 Like
8

Use this

card_mod:
  style:
    ha-tile-icon $: |
      div.container {
      background: rgba(0,0,0,1) !important;
      height: 40px;
      width: 40px;
      border-radius: 20%;
      --mdc-icon-size: 40px;
        }

image
image782×268 4.72 KB

9

Still fighting with it, but it doesn’t do what I want. The code inspector is a good idea, will try that. Thank you for your answer though, great that you are thinking with me :slight_smile: