How to style ha-icon in Markdown card

Configuration Frontend
1

I have the following markdown card:

type: markdown
content: >-
  # <center>
  Salon
  {% if is_state('binary_sensor.okno_salon_contact', 'on') %}
  <ha-icon icon='mdi:window-open-variant'/>
  {% else %}
  {% endif%}
  </center>
style: |
  ha-icon {
      fill: #F5C344;
  }

Unfortunately, the style is not applied to the ha-icon. How can I “catch” it with CSS? Tried ha-svg-icon, icon, svg (all of which works in devtools) - no luck.

Any ideas?

2 

  <font color='#F5C344'><ha-icon icon='mdi:window-open-variant'/>
3 Likes
3

Thank you! That did the trick. I didn’t even know that SVG graphics are considered fonts.

type: markdown
content: >-
  # <center>
  Salon
  {% if is_state('binary_sensor.okno_salon_contact', 'on') %}
  <font color='#F5C344'><ha-icon icon='mdi:window-open-variant'/></font>
  {% else %}
  {% endif%}
  </center>
4

For more information see here: Markdown Card - Home Assistant

(The alert function is also nice).