squidfunk / mkdocs-material

Documentation that simply works
https://squidfunk.github.io/mkdocs-material/
MIT License
20.91k stars 3.54k forks source link

Custom icons for Tags are not working #6431

Closed ankithabangar closed 11 months ago

ankithabangar commented 11 months ago

Context

Contribution guidelines

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

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: Screenshot 2023-12-04 120958

All tag icons not visible: Screenshot 2023-12-04 121031

Icon is visible in markdown but not in tags: Screenshot 2023-12-04 121543

Browser

No response

Before submitting

squidfunk commented 11 months ago

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