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


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:

<table width=300>
 <col width=60>
 <col width=60>
 <col width=60>
 <col width=60>
 <col width=60>
  <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>
  <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?

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=''><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.

Hey there! :slight_smile:

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

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

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. :slight_smile: Thanks for understanding! :slight_smile:

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

seems this another question? And Ive already answered…

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

It’s nothing else than a follow up question…

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.

Do as you please! :slight_smile:

1 Like

Thank you to both of you!

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?

I’ve also tried

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

, but that leaves a blank field in the table…

Well, of course the template should return a valid

Test it in dev tools templates

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. :wink:

<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.

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 =
                 .split('; ')[1] %}
            {% set weather = {'Fog':'fog',
                              'Zware regen':'pouring',
                              'Onweersbuien':'lightning'} %}
            {% set climate = {'Extreme high temperature':'thermometer-chevron-up',
                              'Extreme low temperature':'thermometer-chevron-down',
                              'Coastal Event':'waves',
                              '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… :wink: (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

and an alert button in my Alerts dashboard:

type: custom:button-card
  - button_body
  - styles_cf_notification
entity: binary_sensor.meteoalarm_brabant
name: MeteoAlarm
  text_color: >
    [[[ var param = entity.attributes.severity;
        var colors  = {'Safe':'var(--ok-color)','Moderate':'gold','Severe':'darkorange',
        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

1 Like

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>


<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:


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

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)

1 Like

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

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: >

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



Thank you, i’ve found that already!

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

1 Like