[Feature Request] Customize toc permalink icon

[couleurm]

Hey, I haven't found ways to customize that icon with another svg and change the transparency of it (e.g make it like 20/50% opacity)

is that possible with non-insiders as of today?

[kamilkrzyskow]

Hello,
it's possible to customize the permalink icon with additional CSS. https://squidfunk.github.io/mkdocs-material/customization/#additional-css
You could look at the PyMdown Extensions documentation for reference https://facelessuser.github.io/pymdown-extensions/

The markdown_extensions toc needs to be configured with an empty string to remove the default paragraph unicode icon, you could also input any other valid text marker in that place, but you asked for a SVG specifically, so keep it empty.
https://github.com/facelessuser/pymdown-extensions/blob/899e811fa4e562b771a97073ad075c17d79851e8/mkdocs.yml#L93-L96

Then you need to add the SVG in CSS:
https://github.com/facelessuser/pymdown-extensions/blob/gh-pages/assets/pymdownx-extras/extra-fb5a2a1c86.css
The reference is unfortunately minified, so I'll just copy it from the Web Developer Tools here:

.md-typeset .headerlink:hover, .md-typeset [id]:target .headerlink {
  background-color: var(--md-accent-fg-color);
}

.md-typeset .headerlink {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  background-color: var(--md-default-fg-color--lighter);
  background-size: 1em;
  -webkit-mask-size: 1em;
  mask-size: 1em;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  visibility: visible;
  -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7a5 5 0 0 0-5 5 5 5 0 0 0 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1M8 13h8v-2H8v2m9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1 0 1.71-1.39 3.1-3.1 3.1h-4V17h4a5 5 0 0 0 5-5 5 5 0 0 0-5-5Z"/></svg>');
  mask-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7a5 5 0 0 0-5 5 5 5 0 0 0 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1M8 13h8v-2H8v2m9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1 0 1.71-1.39 3.1-3.1 3.1h-4V17h4a5 5 0 0 0 5-5 5 5 0 0 0-5-5Z"/></svg>');
}

I followed the same principle at https://gothic-modding-community.github.io/gmc/

---

And to edit the opacity you can add the opacity attribute:

.md-typeset .headerlink {
  opacity: 0.5;
}

[kamilkrzyskow]

Oh and I only searched now, and there is a sort of duplicate guide to how to do it here: #3535