Change ha-icon size in markdown card

brondum · April 14, 2020, 6:23am

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 ?

AhmadK · April 14, 2020, 6:34am

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.

brondum · April 14, 2020, 6:41am

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.

AhmadK · April 14, 2020, 6:46am

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.

brondum · April 14, 2020, 6:50am

Finding the element is not the issue

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.

AhmadK · April 14, 2020, 1:35pm

add height: 45px; to your style

petro · April 14, 2020, 5:21pm

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') }}"/>

brondum · April 15, 2020, 5:12am

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

Thanks

petro · April 15, 2020, 11:00am

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.

Mariusthvdb · February 1, 2021, 1:04pm

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

petro · February 1, 2021, 1:06pm

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

Mariusthvdb · February 1, 2021, 1:11pm

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;
          }