Change icon color in markdown card with card-mod

Not sure where to put this, card-mod thread or markdown thread so I put it in a new one.
I have a markdown card that has one icon and two different headers. The problem I have is that the icon color gets the same as the background and I cant get it changed.

This is the code, its used as a decluttering-card but I dont think thats the problem.

    type: markdown
    style: |
      ha-card {
        box-shadow: none;
        padding: 10px 0px;
        color: #fff;
        background-color: var(--dwains-theme-header-background);
        margin-top: -4px;
        border-radius: 0; 
        font-weight: bold;
        font-size: 14px;
      ha-markdown {
        padding-top: 0px !important;
        padding-bottom: 14px !important;
      ha-card a {
        color: var(--dwains-theme-header-text) !important;
      ha-card p {
        margin-bottom: 0px;
      ha-card h1 {
        color: var(--dwains-theme-header-text);
        font-size: 1.5em;
        {% if subtitle %}
        margin: 0;
        {% else %}
        margin: 10px 0 0 0;
        {% endif %}
      ha-card h3 {
        font-size: 13px;
        font-weight: normal;
        color: var(--dwains-theme-header-text);
        {% if subtitle %}
        margin: 14px 0 0 0;
        {% else %}
        margin: 0;
        {% endif %}
    content: |
      [<ha-icon icon=fas:chevron-left></ha-icon>](/lovelace/[[path]])


try changing that to:

[<ha-icon icon=fas:chevron-left style="color: white;"></ha-icon>](/lovelace/[[path]])

Thx for the reply, sadly that wont do anything. :confused:

works for me :man_shrugging:

Thats very strange, even tried useing the default theme and a clean card with only this but the color wont change.


<font color="White"><ha-icon icon=fas:chevron-left></ha-icon></font>

thanks for that! never would have tried the font color on an icon :wink:

can confirm that:

    content: |
      from <font color='#03a9f4'><ha-icon icon=mdi:home-assistant ></ha-icon></font> to <a href=''><img src = '/local/various/google_drive.png' alt='Google Drive' align='middle' width='25' height='25'></img></a>

works while the ‘official’:

    content: |
      from <ha-icon icon=mdi:home-assistant color='#03a9f4'></ha-icon> to <a href=''><img src = '/local/various/google_drive.png' alt='Google Drive' align='middle' width='25' height='25'></img></a>

simply does nothing.

In the above, I changed from the google drive icon to an image, because of this same reason. Couldn’t get it to color correctly.

Only issue I now have is the alignment of the img :wink:

Schermafbeelding 2020-09-09 om 12.20.59

but Ill give that a dedicated topic…

You have to put them all in the same span or text then set an alignment on that

Hoping someone can help! I am trying to get the icon within a markdown to match the color of my theme, rather than setting it to a specific colour. However when I use a variable it seems to default it to a dark blue and not to the primary color. It works when I hard code the color but doesn’t like the variable. Any idea what I am doing wrong?

Screenshot (light blue in the button is the var(–primary-color) variable for this theme, dark blue is the result when using the below code):


                - type: markdown
                    .: |
                      ha-card {
                         background-color: rgba(0,0,0,0) !important;
                         box-shadow: none;
                      $: |
                        ha-markdown-element:first-of-type h2 {
                          background-color: none;
                  content: |
                      ## <font color='var(--primary-color)'><ha-icon icon=mdi:robot-vacuum ></ha-icon></font> Vacuum

Bumping this, it is the only thing that I can’t change dynamically using themes at the moment. Hoping someone knows the magical answer to this!

Just add style with color to the icon html object

Sorry Petro, not sure I understand!!! I am trying to dynamically change the font color based on the var(–primary-color) theme variable like the below.

content: |
                      ## <font color='var(--primary-color)'><ha-icon icon=mdi:robot-vacuum ></ha-icon></font> Vacuum

Looks like markdown doesn’t allow variables?!?!

Are you familiar with html and css? I’m on mobile so I can’t really write it out. But you’d add style=“color: var(–paper-item-icon-active-color);” to the ha-icon

Yep have played around with various options, and nothing seems to work.

Using what you have suggested results in a grey icon, not the primary color.

        content: |
            ### <font><ha-icon style="color: var(--primary-color);" icon=mdi:floor-plan ></ha-icon></font> Rooms

believe you asked me elsewhere about theme variables? my answer would be No, they are not respected in Markdown, have a look here: How to create a test sheet for theme colors - #3 by Mariusthvdb

which results in utterly unexpected colors…

I’ve solved it using intermediary sensors that have a color as state:

  - type: custom:hui-element
    card_type: markdown
    content: >
      # <font color = {{states('sensor.trash_color')}}>Afvalkalender</font>

      <font color={{states('sensor.trash_color')}}><ha-icon icon= {{'mdi:delete-alert' if states('sensor.afvalwijzer_today') != 'Geen' else 'mdi:delete-outline'}}> </ha-icon></font> Vandaag, {{states('sensor.vandaag')}}: <font color= {{states('sensor.trash_color')}}>**{{states('sensor.afvalwijzer_today')|capitalize}}</font>**

      <font color={{states('sensor.trash_next_color')}}><ha-icon icon= {{states('sensor.trash_next_icon')}}> </ha-icon></font> Volgende afval-ophaal over **<font color={{states('sensor.trash_next_color')}}>{{states('sensor.afvalwijzer_next_in_days')}}</font>** {{'dag' if states('sensor.afvalwijzer_next_in_days') == '1' else 'dagen'}} op:

      <ha-icon icon= 'mdi:delete-alert'> </ha-icon> {{states('sensor.volgende_afval_ophaal_dag')}}: **<font color={{states('sensor.trash_next_color')}}>{{states('sensor.afvalwijzer_next_item')|capitalize}}</font>**

which works perfectly with a sensor like:

        value_template: >
          {% set next = states('sensor.afvalwijzer_next_item') %}
          {% set mapper = {'papier':'deepskyblue',
                           'restafval':'black'} %}
          {% set color = mapper[next] if next in mapper else 'grey' %}
1 Like