how to set tags?

[zaccur]

Please Help~
I can't find how to set this in docs

[alexvoss]

These tags are a customization of the Material documentation. They are not a feature of Material itself. If you are a sponsor then you can look at the implementation here. Essentially, you would configure an on_page_markdown hook and replace some placeholder string with appropriate HTML, such as a span, which you can then embed an icon and text in. Then style with CSS.

There was a similar discussion the other day but I cannot seem to find it just now, will add if I do.

[squidfunk]

In fact, the implementation is part of the community repository, so you don't need to be a sponsor to take and adapt our custom hook ☺️ Other discussion was at #6020. We might generalize this in the future to ship it as a native component, but we currently have other priorities. Will re-evaluate in the future if more users need it.

[zaccur]

thanks

[pyhsudars]

Tags as a native component would be good in the community edition

[squidfunk]

Thanks for your feedback – we'll keep that in mind ☺️

[gmkado]

I was able to get a version of this working using the badges plugin. Combined with the magic link extension I can write something like this:

|:material-tag:|#499|

And it renders like this:

And is clickable and takes me to my pull request matching that number.

[Aetherinox]

The badges plugin is nice, however, the ones used in the mkdocs material documentation have a very small footprint.

So after a few hours of messing with the hooks, I was able to implement it.

Would be nice to get it as a feature one day, but for now, this works good.

Just a matter of getting the icons right. For icons that small, I tried Fontawesome 6's duo-tone, and they seem too small for that type of font.