Can I show icons inside templates

Configuration Frontend
1

I use a template card on my dashboard.

I use the following code to display the number of open windows on that card:

{%set state=states('sensor.office_open_windows')%}{% if state | int >= 1 %} W: {{ state }}{% else %}{% endif %}

So if e.g. one window is open it displays “W: 1”. So far so good. However it would look cooler if instead of the W I could display a mdi:window-open icon in front of the counter.

I tried adding mdi:window-open in various ways but I could not get it to work. Btw. I am happy with a static icon, does not have to be dynamic.

2

Yes, it’s in the doc for markdown cards

2 Likes
3

And if we aren’t using markdown cards? Standard templates don’t render this markdown
e.g.
<ha-icon icon="mdi:home-assistant"></ha-icon>
just displays as-is in the text field.

Here is the code in context (this is a custom row type which supports templating in all fields):

secondary: |
  {% set s = (states('sensor.pixel_8_battery_state')|replace('_',' ')|title)%}
  {% if s == 'Charging' or s == 'Not Charging' %}      
  {{s}} - {{ states('sensor.pixel_8_charger_type')|title}}
  <ha-icon icon="mdi:home-assistant"></ha-icon>
  {% else %}
  {{s}}
  {% endif %}

And here is the result:

1000007314
1000007314748×202 13.5 KB

1 Like
4

I’m looking for this too, without having to use a mark down card. More specifically, I want to use an icon in a template inside a mushroom card.

5

You can template in Mushroom cards. Just use the type: custom:mushroom-template-card

type: custom:mushroom-template-card
entity: light.pc_lights
icon: |
   {{ 'mdi:lightbulb-off' if states(config.entity) == 'off' else 'mdi:lightbulb'}}
icon_color: |-
    {{ 'grey' if states(config.entity) == 'off' else 'yellow'}}
primary: Light Example

For Mushroom related questions, check out the main threads here and here

6

That really does not solve the above use case.
I am doing the same. I am looking to use icons in line the secondary information text same as @trevsk1 above. Is ther a way to do this?

7

You need to be more specific about what card type you are using.

8

Here is an example that I’m pretty sure reflects the original author’s intent.

type: custom:mushroom-template-card
secondary: >-
  📱{{ states('sensor.phone_battery_level') }}%
  ⌚{{ states('sensor.watch_battery_level')}}%

Instead of the :iphone:(phone) and :watch:(watch) emojis I’d like to refer to the material design icons mdi:cellphone and mdi:watch.

btw @hesspoint, emojis may be a decent workaround.

Thanks,
Mike

1 Like
9

This works very well for visually separate dense data on cards.
Such as including last update, battery, and RSI at a glance without taking up large area.
It doesn’t match the HA icons, but they are smaller, and useful. Thank you.

Is there any way to embed two or more icons on a card connected to entities?
Example a smoke detector has both smoke and CO2 entities.
Or is the only solution to create a template alert state to or both, then use the separate text states in the status lines
Smoke: Clear | CO2: Alert

Tried many normal cards and mushroom. Multi entity takes up a ton of screen space for each .