How to increase the size of Mushroom icon

1

Hi, I use mushroom cards. I would like to increase the size of the icons inside the card (circle).

Screenshot 2022-11-30 at 11.25.57
Screenshot 2022-11-30 at 11.25.57788×190 9.05 KB

I’m only able to increase the “circle”, but not the icon itself. The information I find re. this is also conflicting. Some say you can’t (see: Icon size?), others say you need to use card_mod. I see references to

–mdc-icon-size

or to ha-card with the option of

–icon-size:

I’m lost as to what is possible and what is not possible.

2

And then I find something like this, which does exactly what I need:

        card_mod:
          style: |
            :host {
              --mush-icon-symbol-size: 0.75em;
            }

I do wish some of this information was more easily found rather than relying on search engines.

1 Like
3

Thanks a mil, @braham !
I ended up here while searching for the same thing.
Additional question: Did you came across a setting to only change the size of the animated icon?

Here’s some nice screenvids for others to view
Peek 2022-12-13 19-24

And very over the top size:

Peek 2022-12-13 19-22

4

Do you mean only to change the size when it is animated ? No, I don’t know that setting.

5

Yeah exactly, so it can f.i. be bigger when it is active. But thanks anyway, I like how I can change the size now!

6

Hi, is it possible to post the full code of the animated fan card ?
I can’t make a custom card with a bigger icon + an animation. thks !

7

I found… thank for your inspiration / post , this put me on the right track ! :slightly_smiling_face:

8

well then, can you share the code? lmao

9

Hi, the code :

type: custom:mushroom-template-card
icon: mdi:pot-steam
icon_color: grey
card_mod:
  style:
    mushroom-card: |
      :host {
        --mush-icon-size: 75px;       
        } 
    mushroom-shape-icon$: |
              ha-icon {
                --icon-animation: steam 2s ease-in-out infinite; 
              }
              @keyframes steam {
                0%, 100% { clip-path: inset(0 0 0 0); }
                50% { clip-path: inset(39% 0 0 0); }
              }

Screenshot_20230225-204925
Screenshot_20230225-204925863×275 145 KB

2 Likes
10

Hello, I have created the attached Grid Card with 4 elements.
One of this is a Mushroom Template Card. as you can see the size of the card is different from the default sizes the other cards have. is there a way to much the size of the other cards?

image

square: false
columns: 2
type: grid
cards:
  - type: media-control
    entity: media_player.nicks_tv_3
  - type: media-control
    entity: media_player.plex_plex_for_android_tv_nick_s_tv
  - type: media-control
    entity: media_player.spotify_nick_XXXX
  - type: custom:mushroom-template-card
    primary: PlayStation 5
    secondary: |-
      {% if is_state('switch.nick_s_ps5_power', 'on') %}
        {{ state_attr('sensor.nick_s_ps5_activity', 'title_name')
          or states('sensor.nick_s_ps5_activity')
        }}
      {%- else -%}
        {{ states('switch.nick_s_ps5_power') }}
      {%- endif -%}
    icon: si:playstation
    entity: switch.nick_s_ps5_power
    picture: '{{state_attr(''sensor.nick_s_ps5_activity'', ''title_image'')}}'
    badge_icon: |-
      {% if is_state('ssensor.nick_s_ps5_activity', 'playing') %}
        mdi:controller
      {%- elif is_state('sensor.nick_s_ps5_activity', 'idle') -%}
        mdi:sleep
      {%- endif -%}
    tap_action:
      action: more-info
    hold_action:
      action: toggle
    fill_container: false