Change ha-icon size in markdown card

Hi Guys.
I have run into a small problem that i cant seem to get my head around.
I am trying to resize an icon within a markdown card.

original content:

- type: 'custom:hui-markdown-card'
  content: >
   <ha-icon icon="mdi:{{ states('sensor.weather_icon') }}"></ha-icon>

I have tried by adding style to the element, but it ignores when rendering.

- type: 'custom:hui-markdown-card'
  content: >
   <ha-icon icon="mdi:{{ states('sensor.weather_icon') }}" style="width: 45px;"></ha-icon>

Any ideas on how i can change this ?

1 Like

open Inspector and check why it is “ignored”.
for these things you have to see what’s inside.

I can only say that

style:
    font-size: 1.4vw

won’t work anyway it doesn’t look like a proper CSS selector.
I’d suggest to post your card’s config here as just this bit might not be enough.

The debugger in Chrome does not give me much, at least not in the console.
Only thing i can see is that my style element from the <ha-icon> is not rendered. It just gets ignored.
Tried adding an ID as well, same story.

Inspector. Right click on your element -> Inspect. Next pane to Console.

because card-mod can’t find where to apply it.
start with

style:
 .: '* {display: here}'

to get an idea where you are.

Finding the element is not the issue :slight_smile:

Actually i should have left out the style stuff from card-mod, because that is meant for the text not the icon. Just pasted in the top of the card.

add height: 45px; to your style

The only way you can do it is with card mod. The following should work, but keep in mind, all icons will be this way size:

- type: markdown
  style: |
    ha-card {
      --iron-icon-width: 45px;
      --iron-icon-height: 45px;
    }
  content: >
    <ha-icon icon="mdi:{{ states('sensor.weather_icon') }}"/>

Thank you very much Petro.
Bummer, but then i will have to do some trickery with multiple cards or something.

Thanks :slight_smile:

For what it’s worth, if you just need an icon, you can use custom:button-card. It’s much more manageable if you’re trying to piece meal a ‘crazy’ interface.

1 Like

sorry to bump this, but it’s the only reference I can find…

using:

    card:
      type: markdown
      style: |
        ha-card {
          background: #103773;
          color: white;
          --iron-icon-width: 45px;
          --iron-icon-height: 45px;
          }
      content: >
        {% set alarm_color = state_attr('binary_sensor.meteoalarm_brabant','awareness_level').split(' ')[1].split(';')[0] %}
        ## <font color= {{alarm_color}}> {{state_attr('binary_sensor.meteoalarm_brabant','headline')}}</font>

         <font color= {{alarm_color}}><ha-icon icon= {{states('sensor.meteoalarm_icon')}}></ha-icon></font>

        <font color= {{alarm_color}}> **Severity:**</font> {{state_attr('binary_sensor.meteoalarm_brabant','severity')}}

        <font color= {{alarm_color}}> **Type:**</font> {{state_attr('binary_sensor.meteoalarm_brabant', 'awareness_type').split(';')[0]}}

        <font color= {{alarm_color}}> **Description:**</font>

        {{state_attr('binary_sensor.meteoalarm_brabant','description')}}

        <font color= {{alarm_color}}> [{{state_attr('binary_sensor.meteoalarm_brabant','attribution')}}]({{state_attr('binary_sensor.meteoalarm_brabant','web')}})</font>

or anything else I tried thus far doesn’t affect the icon size:

the element is called ‘ha-svg-icon’ which I have also tried to no avail unfortunately. Is this a lost cause, or should I try something else…

note I have set a font color to the icon to have it accept a color change, maybe I should try and style the in the ha-card styling too?
thanks for having a look

verify that the css names are still iron-icon-height and width. They may have changed.

you’re right: Iron icon height / width not working anymore

its now --mdc-icon-size

      style: |
        ha-card {
          background: #103773;
          color: white;
          --mdc-icon-size: 50px;
          }

10 Likes