Custom icons for Tags are not working

[ankithabangar]

Context

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

I want to suggest an idea and checked that ...

• ... to my best knowledge, my idea wouldn't break something for other users
• ... the documentation does not mention anything about my idea
• ... there are no open or closed issues that are related to my idea

Bug description

Description

I followed the instructions to add custom icons for Tags but the feature is not working. I have added icons to all the tags but it is rendering only for one tag even for that only a square box is visible. I tried using the icon elsewhere in the website and I am able to see the icon. Please check the screenshots added. I am also getting weird code along with the icon above the header.

Related links

• Setting up tags
• Changing the logo and icons
• Cant't figure out how to use custom icons
• Add tags icons on tags index

Reproduction

This is my mkdocs.yml file

site_name: ""
docs_dir: docs/

markdown_extensions:
  - abbr # to add tooltips
  - attr_list # to add annotations, align images.
  - md_in_html # to add annotations
  - pymdownx.arithmatex: # To add Math functionalities
      generic: true
  - pymdownx.emoji: # To add custom icons
      emoji_index: !!python/name:material.extensions.emoji.twemoji
      emoji_generator: !!python/name:material.extensions.emoji.to_svg
      options:
        custom_icons:
          - overrides/.icons
  # This configuration enables syntax highlighting on code blocks and inline code blocks,
  # and allows to include source code directly from other files.
  - pymdownx.highlight:
      anchor_linenums: true
      line_spans: __span
      pygments_lang_class: true
  - pymdownx.inlinehilite
  - pymdownx.snippets:
      # This appends content of abbreviations.md to all markdown files
      auto_append:
        - docs/includes/abbreviations.md
  - pymdownx.superfences: # to add annotations and charts
      custom_fences:
        - name: vegalite
          class: vegalite
          format: !!python/name:mkdocs_charts_plugin.fences.fence_vegalite
  - pymdownx.tabbed:
      alternate_style: true
  - tables

extra_javascript:
  - javascripts/mathjax.js
  - https://polyfill.io/v3/polyfill.min.js?features=es6
  - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
  - https://cdn.jsdelivr.net/npm/vega@5
  - https://cdn.jsdelivr.net/npm/vega-lite@5
  - https://cdn.jsdelivr.net/npm/vega-embed@6

plugins:
  - search
  - tags:
      tags_file: tags.md
      tags_allowed:
        - Bevel gears
        - Cam contacts
        - Cylindrical gears
        - Developer mode
        - Examples
        - GUI
        - Journal bearings
        - Microsim
        - Piston
        - Rolling contacts
        - Thrust bearings
        
  # To add zoom functionality to images
  - glightbox:
      touchNavigation: true
      loop: false
      effect: zoom
      slide_effect: slide
      width: 100%
      height: auto
      zoomable: true
      draggable: true
      skip_classes:
        - custom-skip-class-name
      auto_caption: false
      caption_position: bottom
  #Plugin for languages
  - i18n:
      docs_structure: suffix
      fallback_to_default: true
      reconfigure_material: true
      reconfigure_search: true
      languages:
        - locale: en
          default: true
          name: English
          build: true
        - locale: de
          name: Deutsch
          build: true
          theme:
            palette:
              #Palette toggle for light mode(default)
              - scheme: default
                toggle:
                  name: In den Dunkelmodus wechseln
              #Palette toggle for dark mode(slate)
              - scheme: slate
                toggle:
                  name: In den Lichtmodus wechseln
          nav_translations:
            Home Page: Startseite
  # - with-pdf:
  #     render_js: true
  #     headless_chrome_path: C:\Program Files\Google\Chrome\Application\chrome.exe
  - charts

extra_css:
  - stylesheets/styles.css
  - https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/katex.min.css

extra:
  #To remove "Made with Material for MkDocs" notice from footer
  generator: false
  tags:
    Bevel gears: bg
    Cam contacts: cc
    Cylindrical gears: cg
    Developer mode: dm
    Examples: egs
    GUI: gui
    Journal bearings: jb
    Microsim: ms
    Piston: p
    Rolling contacts: rc
    Thrust bearings: tb
    

theme:
  icon:
    annotation: material/plus-circle
    tag:
      bg: tags/Cam2
      cc: tags/Cam2
      cg: tags/Cam2
      dm: tags/Cam2
      egs: tags/Cam2
      gui: tags/Cam2
      jb: tags/Cam2
      ms: tags/Cam2
      p: tags/Cam2
      rc: tags/Cam2
      tb: tags/Cam2
      
  # font:
  #   text: Ubuntu
  #   code: Ubuntu Mono
  custom_dir: overrides
  logo: assets/logo.png
  favicon: assets/Favicon.ico
  name: material

  features:
    - content.code.annotate
    - content.code.copy
    - content.tabs.link
    - header.autohide
    - navigation.expand
    - navigation.footer
    - navigation.indexes
    - navigation.sections
    - navigation.tabs
    - navigation.tabs.sticky
    - navigation.top
    - navigation.tracking
    - search.highlight
    - search.suggest

  palette:
    #Palette toggle for light mode(default)
    - scheme: default
      toggle:
        icon: material/lightbulb
        name: Switch to dark mode
      primary: custom
      accent: custom
    #Palette toggle for dark mode(slate)
    - scheme: slate
      toggle:
        icon: material/lightbulb-outline
        name: Switch to light mode
      primary: custom
      accent: custom

Steps to reproduce

Screenshots

Code above the header:

All tag icons not visible:

Icon is visible in markdown but not in tags:

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.

[squidfunk]

Thanks for reporting. This is definitely a configuration error. Converting to discussion.

[alexvoss]

Hi, it might help to produce a minimal reproduction so we can more clearly see what is going on. There is a lot of other configuration in what you posted. I typed out half an answer that would have gone in the wrong direction before I spotted where your definition of the tag identifiers is. Doing a reproduction would also help with ruling out some weird interactions between plugins or features.

[ankithabangar]

I have created a minimal reproduction still facing the same issue.

Reproduction

The mkdocs.yml file

site_name: My Docs
docs_dir: docs/


theme:
  name: material
  custom_dir: docs/overrides/
  icon:
    tag:
      html: tags/Cam2
      css: tags/Cam2
      js: tags/BGe

markdown_extensions:
  - pymdownx.emoji: # To add custom icons
      emoji_index: !!python/name:material.extensions.emoji.twemoji
      emoji_generator: !!python/name:material.extensions.emoji.to_svg
      options:
        custom_icons:
          - docs/overrides/.icons

plugins:
  - tags:
      tags_file: tags.md

extra:
  tags:
    HTML5: html
    CSS3: css
    JavaScript: js

index.md

---
tags:
  - HTML5
  - JavaScript
  - CSS3
---

# Welcome to MkDocs

For full documentation visit [mkdocs.org](https://www.mkdocs.org).

## Commands

* `mkdocs new [dir-name]` - Create a new project.
* `mkdocs serve` - Start the live-reloading docs server.
* `mkdocs build` - Build the documentation site.
* `mkdocs -h` - Print help message and exit.

## Project layout

    mkdocs.yml    # The configuration file.
    docs/
        index.md  # The documentation homepage.
        ...       # Other markdown pages, images and other files.

Screenshots

[squidfunk]

My guess is that there are single quotes in your SVGs, that break the inclusion (which is why you see them at the top of the page). Remove the single quotes and it should work. But since this is not a runnable reproduction, i.e, something that we can download and execute, I can only guess.

[ankithabangar]

I have removed the single quotes but still facing the same issue. I have also attached the zip folder for your reference.
min_reproduction_custom_tag_icons.zip

[squidfunk]

It seems to be related to the style tags in the SVGs. Inline SVGs cannot define style tags. If you remove them the markup at the top is gone but the icons are still not appearing. There's some other problem with your SVG. It is definitely related to the markup which looks like something you exported from a drawing program. Make sure to clean the SVG from any residuals. In any case, it is not specific to Material for MkDocs, but to inline SVGs in general.

[ankithabangar]

I have optimised the svg file and the markup at the top is gone but still the icon is not visible in the tags.
Cam2.svg

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 8.4667 8.4667">
  <g transform="translate(-43.489 -99.874)">
    <g transform="matrix(.01 0 0 .01 32.487 26.009)" clip-rule="evenodd" fill-rule="evenodd">
      <g transform="matrix(.25418 0 0 .25418 842.92 5531.7)">
        <circle cx="2673.8" cy="8617.8" r="1038.8" fill="none" stroke="#EA5901" stroke-width="355.6" stroke-miterlimit="22.9256"/>
        <line x1="1466.9" y1="10456" x2="3902.1" y2="10456" fill="none" stroke="#EA5901" stroke-width="135.47" stroke-miterlimit="22.9256"/>
        <path d="M2673.8 10316c487.25-85.82 1035.5-1061.3 1038.8-1698.1" fill="none" stroke="#EA5901" stroke-width="355.6" stroke-linecap="round" stroke-miterlimit="22.9256"/>
        <path d="M2673.8 10316c-487.24-85.82-1035.5-1061.3-1038.8-1698.1" fill="none" stroke="#EA5901" stroke-width="355.6" stroke-linecap="round" stroke-miterlimit="22.9256"/>
        <path d="M1639.2 8711.2c51.4 634.57 570.68 1522.9 1034.6 1604.7 463.97-81.72 983.25-970.09 1034.6-1604.7-47.25 529.91-492.43 945.32-1034.6 945.32-542.21 0-987.39-415.41-1034.6-945.32z" fill="#EA5901"/>
      </g>
    </g>
  </g>
</svg>

[alexvoss]

Your cleaned-up SVG is missing the style definitions, which might explain it.

[ankithabangar]

I found the problem. It was because of the color attribute. I guess MkDocs does not support color for tag icons. It works fine now. Thank you

[squidfunk]

Perfect, thanks for sharing!