Context

When using tag icons as described in the docs, 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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#FFCB4C" d="M30.728… …

Bug description

With custom SVG icons whose XML contain a # like in <path fill="none" stroke="#000000" , the data-url considers it a fragment and stops parsing the XML there, breaking the rendering.
Here's an SVG that can be used to reproduce the problem.
I think the bug would be solved when url-encoding or base64-encoding the SVG part of the data-url (data:image/svg+xml…) part so that a # doesn't occur in it. The Reproduction file contains a proof-of-concept for this.

The relevant line-of-code that needs to be fixed is in material/templates/partials/icons.html#L41.

Related links

• https://squidfunk.github.io/mkdocs-material/setup/changing-the-logo-and-icons/#additional-icons
• Use emojis as tags #8082

Reproduction

repro.zip

I've also added a gist with the relevant basic files for a quick look.

Steps to reproduce

see bug description / repro archive.

Browser

No response

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction using the built-in info plugin.