Added support for customizing (code) annotation icons

docs/reference/annotations.md

@@ -31,6 +31,46 @@ See additional configuration options:
   [Markdown in HTML]: ../setup/extensions/python-markdown.md#markdown-in-html
   [SuperFences]: ../setup/extensions/python-markdown-extensions.md#superfences
 
+### Annotation icons
+
+[:octicons-tag-24: 9.2.0][Annotation icons support]
+
+The annotation icon can be changed to any icon bundled with the theme, or even
+a [custom icon], e.g. to material/arrow-right-circle:. Simply add the following
+lines to `mkdocs.yml`:
+
+``` yaml
+theme:
+  icon:
+    annotation: material/arrow-right-circle # (1)!
+```
+
+1.  Enter a few keywords to find the perfect icon using our [icon search] and
+    click on the shortcode to copy it to your clipboard:
+
+    <div class="mdx-iconsearch" data-mdx-component="iconsearch">
+      <input class="md-input md-input--stretch mdx-iconsearch__input" placeholder="Search icon" data-mdx-component="iconsearch-query" value="material circle" />
+      <div class="mdx-iconsearch-result" data-mdx-component="iconsearch-result" data-mdx-mode="file">
+        <div class="mdx-iconsearch-result__meta"></div>
+        <ol class="mdx-iconsearch-result__list"></ol>
+      </div>
+    </div>
+
+Some popular choices:
+
+- :material-plus-circle: - `material/plus-circle`
+- :material-circle-medium: - `material/circle-medium`
+- :material-record-circle: - `material/record-circle`
+- :material-arrow-right-circle: - `material/arrow-right-circle`
+- :material-arrow-right-circle-outline: - `material/arrow-right-circle-outline`
+- :material-chevron-right-circle: - `material/chevron-right-circle`
+- :material-star-four-points-circle: - `material/star-four-points-circle`
+- :material-plus-circle-outline: - `material/plus-circle-outline`
+
+  [Annotation icons support]: https://github.com/squidfunk/mkdocs-material/releases/tag/9.2.0
+  [custom icon]: ../setup/changing-the-logo-and-icons.md#additional-icons
+  [icon search]: icons-emojis.md#search
+
 ## Usage
 
 ### Using annotations

material/partials/icons.html

@@ -15,6 +15,18 @@
   {% set _ = style.append("}\x3c/style\x3e") %}
   {{ style | join }}
 {% endif %}
+{% if config.theme.icon.annotation %}
+  {% set style = ["\x3cstyle\x3e:root{"] %}
+  {% import ".icons/" ~ config.theme.icon.annotation ~ ".svg" as icon %}
+  {% set _ = style.append(
+    "--md-annotation-icon:" ~
+    "url('data:image/svg+xml;charset=utf-8," ~
+      icon | replace("\n", "") ~
+    "');"
+  ) %}
+  {% set _ = style.append("}\x3c/style\x3e") %}
+  {{ style | join }}
+{% endif %}
 {% if config.theme.icon.tag %}
   {% set style = ["\x3cstyle\x3e"] %}
   {% for type, icon in config.theme.icon.tag.items() %}

src/partials/icons.html

@@ -36,6 +36,20 @@
   {{ style | join }}
 {% endif %}
 
+<!-- Custom annotation icon -->
+{% if config.theme.icon.annotation %}
+  {% set style = ["\x3cstyle\x3e:root{"] %}
+  {% import ".icons/" ~ config.theme.icon.annotation ~ ".svg" as icon %}
+  {% set _ = style.append(
+    "--md-annotation-icon:" ~
+    "url('data:image/svg+xml;charset=utf-8," ~
+      icon | replace("\n", "") ~
+    "');"
+  ) %}
+  {% set _ = style.append("}\x3c/style\x3e") %}
+  {{ style | join }}
+{% endif %}
+
 <!-- Custom tag icons -->
 {% if config.theme.icon.tag %}
   {% set style = ["\x3cstyle\x3e"] %}