How to show an Icon in a Markdown Card based on the Status of the Entity

JogiL · July 7, 2024, 1:52pm

Hi,

I’m not a coder but I’m trying to learn based on trial and error and adapting codes from other users.

Currently I’m trying to show an icon in a markdown card. The icon shall be different based on the status of the entity and ideally change the color also.

Currently my code is:

<center>
<table width=300>
 <col width=60>
 <col width=60>
 <col width=60>
 <col width=60>
 <col width=60>
 <tr>
  <td><br />&nbsp;</td>
  <td><ha-icon icon="mdi:battery-80"></ha-icon><br />&nbsp;</td>
  <td><ha-icon icon="mdi:ev-station"></ha-icon><br />&nbsp;</td>
  <td><ha-icon icon="mdi:power-plug"></ha-icon><br />&nbsp;</td>
  <td><ha-icon icon="mdi:battery-charging-80"></ha-icon><br />&nbsp;</td>
 </tr>
 <tr>
  <td><ha-icon icon="phu:audi"></ha-icon><br />&nbsp;</td>
  <td>{{states.sensor.tronity_q4_sportback_e_tron_level.state}} %<br />&nbsp;</td>
  <td>{{states.sensor.tronity_q4_sportback_e_tron_range.state}} km<br />&nbsp;</td>
  <td>{{states.binary_sensor.audi_eingesteckt.state}}<br />&nbsp;</td>
  <td>{{ ha-icon icon="mdi:home-assistant" /ha-icon if is_state('sensor.tronity_q4_sportback_e_tron_plugged', 'True') else ha-icon icon="mdi:home-assistant"/ha-icon }}<br />&nbsp;</td>

I must admit that I don’t even know what kind of code I’m using, but I found it when I was looking for a way to show this kind of table. Is there a better solution for the table?

Mariusthvdb · July 7, 2024, 2:23pm

you can add a template like this:

<ha-icon icon=mdi:
      {%- if item %}
        {%- if item.state=='missing' -%} cloud-alert
        {%- elif item.state=='unavail' -%} cloud-off-outline
        {%- else -%} cloud-question
        {%- endif -%} ></ha-icon>
      {%- else -%} help
      {% endif %}

or, if its simpler for you, use the state of a dedicated template sensor:

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

what I am saying is, you can use jinja templates inside a Markdown card

if you wasnt colors inside a markdown for the icons, you need to use the ‘font’ element:

          content: |
            from <font color='#18BCF2'><ha-icon icon=mdi:home-assistant></ha-icon></font> to <a href='https://drive.google.com/drive/my-drive'><font color='#4ca067'><ha-icon icon=mdi:google-drive></ha-icon></font></a>

and use the hex colors, markdown is very unsupportive of other color schemes, even theme colors dont work, let alone color names. use hex colors and your good.

paddy0174 · July 7, 2024, 2:29pm

Hey there!

First, please don’t open up two threads for the same question. Your last thread was practically about the same. Please stay in one thread, it makes helping you much more easy. It’s about the context.

So, I’ll move over to your other thread and answer there. Is that ok for you?

For others, following this question, here we go:

Not meant to be rude, but this forum is already very crowded, it just makes sense to keep information in context, so helping is easier. Thanks for understanding!

EDIT: I’m already writing an answer in your other thread…

Mariusthvdb · July 7, 2024, 2:36pm

seems this another question? And Ive already answered…

paddy0174 · July 7, 2024, 2:39pm

The question is how to design a good looking markdown table with icons, like an energy dashboard!

It’s nothing else than a follow up question…

Mariusthvdb · July 7, 2024, 2:47pm

not sure about that.
I believe it would be good to have a separate post with this in the title, so it can be easily found.

templating the icon and icon color inside a Markdown card, can be less than obvious for many users.

I admit I have been there, and earlier posts on the subject exist, maybe the OP could search and find those too…
other than that, no harm in having it here.

paddy0174 · July 7, 2024, 2:52pm

Do as you please!

JogiL · July 7, 2024, 3:27pm

Thank you to both of you!

JogiL · July 7, 2024, 3:30pm

Thank you for the code, Marius!

I’ve substituted “item” by “sensor.tronity_q4_sportback_e_tron_plugged”, but that doesn’t work. How can I implement your code into mine?

JogiL · July 7, 2024, 3:57pm

I’ve also tried

<ha-icon icon= {{states('binary_sensor.audi_eingesteckt')}}></ha-icon>

, but that leaves a blank field in the table…

Mariusthvdb · July 7, 2024, 6:00pm

Well, of course the template should return a valid
Icon….

Test it in dev tools templates

paddy0174 · July 7, 2024, 8:32pm

There’s a space to much in this line, and it’s missing the quotes around it.

I already answered in the other topic, with a long post and some examples.

<ha-icon icon="{{ states('binary_sensor.audi_eingesteckt') }}"></ha-icon>
----------------------^^--------------------------------------------------------------------------^

Anyway, this example is likely not to work, as you are displaying the state, not the icon. The example from Marius only works, if you setup a template sensor before. so out-of-the-box, it won’t work.

Mariusthvdb · July 8, 2024, 6:52am

yes, and the reason I chose to do it with the external template entity is this:

      - unique_id: meteoalarm_icon
        state: >
          {% if is_state('binary_sensor.meteoalarm_brabant','on') %}
            {% set condition =
                 state_attr('binary_sensor.meteoalarm_brabant','awareness_type')
                 .split('; ')[1] %}
            {% set weather = {'Fog':'fog',
                              'Wind':'windy',
                              'snow-ice':'snowy-heavy',
                              'Thunderstorm':'lightning',
                              'Rain':'pouring',
                              'Zware regen':'pouring',
                              'Zicht':'hazy',
                              'Windstoten':'windy',
                              'Onweersbuien':'lightning'} %}
            {% set climate = {'Extreme high temperature':'thermometer-chevron-up',
                              'Extreme low temperature':'thermometer-chevron-down',
                              'high-temperature':'thermometer-alert',
                              'Coastal Event':'waves',
                              'Forestfire':'camp-fire',
                              'Avalanches':'snowflake-alert',
                              'Rain-Flood':'home-flood',
                              'flooding':'home-flood',
                              'Flooding':'home-flood'} %}
            mdi:{% if condition in weather %}weather-{{weather[condition]}}
            {% elif condition in climate %}{{climate[condition]}}
            {% else %}alert
            {% endif %}
          {% else %} mdi:help
          {% endif %}

Imagine having to fix all that inside a Markdown card… (could probably take out several mappings there, somehow there are 2 languages in it…)

But, as said above, if you use a template, always test it in dev tools Template first, so you are sure there is a valid output.

As a side note: considering a dedicated template sensor for stuff you need in other places can be very useful. In this particular case, I use the same template for showing my view tab icon (set with card_mod theming)

      paper-tab[aria-label='Weer'] {
        --card-mod-icon: {%- if meteo %} {{states('sensor.meteoalarm_icon')}}
                         {%- else %} {{states('sensor.weather_icon')}}
                         {%- endif %};
        color: {{'var(--alert-color)' if meteo else
                 states('sensor.temperature_color_name')}};
      }

and an alert button in my Alerts dashboard:

type: custom:button-card
template:
  - button_body
  - styles_cf_notification
entity: binary_sensor.meteoalarm_brabant
name: MeteoAlarm
variables:
  text_color: >
    [[[ var param = entity.attributes.severity;
        var colors  = {'Safe':'var(--ok-color)','Moderate':'gold','Severe':'darkorange',
                       'High':'var(--alert-color)'};
        return colors[param]||'var(--no-power-color)'; ]]]
  icon_color: >
    [[[ return entity.state == 'on' ? 'var(--alert-color)' :'var(--no-power-color)'; ]]]
icon: >
  [[[ return states['sensor.meteoalarm_icon'].state; ]]]

so that would certainly be part of my answer to this topic: use a template entity

JogiL · July 8, 2024, 7:49am

If I test

<ha-icon icon= {{states('binary_sensor.audi_eingesteckt')}}></ha-icon>

in developer tools the result is <ha-icon icon= off></ha-icon>

With

<ha-icon icon="{{ states('binary_sensor.audi_eingesteckt') }}"></ha-icon>

it is <ha-icon icon="off"></ha-icon>

What should the result be?

There is an icon for the entity that changes based on the status:

WallyR · July 8, 2024, 7:55am

ha-icon is used to show icons in the installed icon packs in HA, like f.ex. mdi.
<ha-icon icon="mdi:weather-sunset-up">

You can find an overview of MDI icons here: Material Design Icons

Mariusthvdb · July 8, 2024, 8:02am

the result should be a valid icon string, like mdi:help

but honestly, if this is still abracadabra to you, it might be a bit too complex yet.

You need to understand what you are doing here.
Which is a combination of html coding, (in the Markdown card) and Jinja templating (for the state dependent icon and icon color)

WallyR · July 8, 2024, 8:10am

Fiddling with it will be a good teaching experience and at most the single card can be messed up, so no big deal.

JogiL · July 8, 2024, 8:13am

I’m just trying to understand the external template entity: You generate a new entity “meteoalarm_icon” and define it’s name based on the state of the binary_sensor.meteoalarm_brabant, right?

Currently the result in developer tools is

- unique_id: meteoalarm_icon
        state: >
           mdi:help

Is this the result I should expect? Shouldn’t it rather be

 mdi:help

?

JogiL · July 8, 2024, 8:15am

Thank you, i’ve found that already!

Mariusthvdb · July 8, 2024, 8:16am

no that is fine.
but that is exactly what I mean, you need to get a better understanding of the HA system. The output is correct, but is it also shows the rest of the syntax itself…

here to help you with that though