Use emojis as tags

[afoeder]

So, I'd like to use tag icons as described in the docs, but with Emojis. I seem to only be able to reference the pool of the bundled icons (material, fa, octicons, simple) with their path (like simple/mealie or fontawesome/solid/tags).

Is there any trick how I could make simple Emojis to work? I could download the set of Twitter Emojis or "OpenMoji" as SVG and place them as custom icon, but I really would like to spare me the overhead. I'd love to choose Emojis for their variety of choices and general availability.

I've already found out that the template renders class="md-tag md-tag-icon md-tag--foobar and places the actual SVG in a section like

<style>
.md-tag.md-tag--foobar {
    --md-tag-icon: url(data:image/svg+xml;charset=utf-8…
 }
</style>

but that didn't lead to too many insights on my end.

So, any nice ideas from your end? Thank you!

[mocdaniel]

There's the possibility to add unicode emojis to your tags directly - this variant worked for me when quickly trying it locally:

---
tags:
  - 🤣 Jokes
---

The downsight of this approach is that you'll have to remember to add the same emoji to every tag you might add. You could enforce the valid emoji + tag combinations with the tags plugin's tags_allowed configuration option:

plugins:
  - tags:
      tags_allowed:
        - 🤣 Jokes
        - 📰 News

Still, it's more work than having the tag icon support :/

I fiddled around with mirroring some Twemoji emojis locally to e.g. venv/lib/python3.13/site-packages/material/templates/.icons/twemoji/laughing.svg and referencing them in the mkdocs.yaml like this:

theme:
  icon:
    tag:
      jokes: twemoji/laughing
extra:
  tags:
    Jokes: jokes
plugins:
  - tags

mkdocs serve didn't complain, so I think it finds the emojis, but they didn't show on the website :/

So, in summary, I think creating custom icons or going with unicode emojis right in the 'tag text' is your best bet.

[afoeder]

but they didn't show on the website

I might have found a bug when the XML of the SVG contains a # like in <path fill="none" stroke="#000000" because the data-url considers it a fragment and stops parsing the XML there; but I have to double-check before I post an issue.
Thanks though for your effort and for appreciating my problem :)

[mocdaniel]

Good catch! When removing all hexcoded colors from the Twemoji SVG, the second approach I described above works - the essentially multicolored emoji becomes useless, though, as its whole shape gets colored gray according to Material's styling:

[afoeder]

thanks, and… meh :)
I still think the use of some Emoji-SVG-pack is the way to go, eventually…

[afoeder]

(fyi, I've created an issue for the lack of urlencoding, #8086)