Make icon sizable in template card

[sotima]

First of all: Thank you for your outstanding work on mushroom-cards.

I would love to use them but encountered a small problem. I would like to be able to enlarge the icon size of (at least) the template card. Right now it seems to be fixed at 20px which for my eyes (I am 60 years young) on my phone is a bit small. I even tried to edit it in the mushroom.js (--mdc-icon-size in .shape ha-icon class) - but I can´t get it to work. So it would be much appreciated if you could make this size adjustable via a themes variable.

Thanks again!

Matthias

[totalitarian]

I'd love this too

[redphx]

@sotima @totalitarian you should be able to change icon size with mushroom 1.8.1.
For example:

Mushroom:
    mush-chip-icon-size: 0.6em
    mush-chip-font-size: 0.4em

    mush-icon-size: 54px
    
    modes:
        light: {}
        dark: {}

[sotima]

Will try this as soon as possible! Thanks a lot!

[totalitarian]

Works as described. Many thanks!

Is it possible to only apply this to certain cards though? I only want to change the icon size for 2 out of 5 cards on a view...

[piitaya]

There is a PR (work in progress) for that : piitaya/lovelace-mushroom#423

But for now, you can define --icon-size using card_mod :

type: custom:mushroom-entity-card
entity: light.kitchen_light
card_mod:
  style: |
    ha-card {
      --icon-size: 54px;
    }

[totalitarian]

Superstar! One last question if I may... How to remove the blue circle but keep the icon?

[piitaya]

We can't but you're not the first to ask it. Maybe we can add an icon-shape-opacity variable to allow user to hide the circle by setting icon-shape-opacity: 0 😅

[totalitarian]

We can't but you're not the first to ask it. Maybe we can add an icon-shape-opacity variable to allow user to hide the circle by setting icon-shape-opacity: 0 😅

That would be great!

[Shannondalebreaux]

There is a PR (work in progress) for that : piitaya/lovelace-mushroom#423

But for now, you can define --icon-size using card_mod :

type: custom:mushroom-entity-card
entity: light.kitchen_light
card_mod:
  style: |
    ha-card {
      --icon-size: 54px;
    }

I tried this but I get this error.

Visual editor is not supported for this configuration:
At path: card_mod -- Expected a value of type never, but received: [object Object]

type: custom:mushroom-entity-card
entity: switch.mae_fan
card_mod:
style: |
ha-card {
--icon-size: 54px;
}

You can still edit your config in YAML.