How to color icons when used in templates?

[ErikJungnickel]

Hello,

I created an override for some sort of a landing page where I also want use some icons.

Following the docs I do it like this:

      <span class="twemoji user">
             {% include ".icons/material/account-alert.svg" %}
      </span>

First I don't understand why I am supposed to use the twemoji class. Is this doing anything that I am overlooking?

Secondly and my actual question: I can not get the icon to use a different color.

I tried the following:

    .user {
        color: #897ff8;
    }

    .user svg{
        color: #897ff8;
    }

    .twemoji {
        color: #897ff8;        
    }

    .twemoji svg {
        color: #897ff8;        
    }

But the icon remains black.

How to change the color of icons when used in html templates?

[alexvoss]

You can see what styling is applied via the twemoji class in the corresponding SCSS stylesheet.

Your CSS should be scoped within .md-typeset to have the same specificity. Try .md-typeset .twemoji and it should work.

[ErikJungnickel]

Hm, doesn't seem to change anything for me. I can also see my styles being applied in the inspector. It just has no effect. It feels I am missing something obvious here.

[ErikJungnickel]

Ok I got it.
What worked for me was setting fill instead of color.

    .user {
        fill: #ff0000;
    }

So not an issue with mkdocs.