Custom Annotations?

[YozoraXCII]

I was wondering if there's a way to define custom annotations with different icons?

I want to use different annotation icons to show "groups" of annotations in a large table.

For example annotation with :fontawesome-solid-1: would all show the same message, annotations with :fontawesome-solid-2: would have a different message.

I am currently using tooltips, but really want to utilize the functionality of annotations (namely HTML/YAML and multiline support)

[kamilkrzyskow]

Hello @YozoraXCII,
your use case is kind of possible but not exactly. Using extra CSS you can include custom SVGs and then based on the parent of the annotation you can choose which icon to use. So if the parent paragraph can be used to choose the style of the annotation then it's possible to achieve what you want.

https://squidfunk.github.io/mkdocs-material/reference/annotations/#using-annotations
Apart of the .annotate you'd add some other custom name like { .annotate .solid-one }

Then using extra CSS you'd add the icon:

• https://squidfunk.github.io/mkdocs-material/customization/#additional-css

.solid-one .md-annotation__index::after {
  mask: var(--md-admonition-icon--note);
  -webkit-mask-image: var(--md-admonition-icon--note);
}

The variable contains a single line data URL with the SVG contents.

:root {
  --md-admonition-icon--note: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m3.1 5.07c.14 0 .28.05.4.16l1.27 1.27c.23.22.23.57 0 .78l-1 1-2.05-2.05 1-1c.1-.11.24-.16.38-.16m-1.97 1.74 2.06 2.06-6.06 6.06H7.07v-2.06z"/></svg>');
}