Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom icons for Tags are not working #6431

Closed
8 tasks done
ankithabangar opened this issue Dec 4, 2023 · 1 comment
Closed
8 tasks done

Custom icons for Tags are not working #6431

ankithabangar opened this issue Dec 4, 2023 · 1 comment

Comments

@ankithabangar
Copy link

ankithabangar commented Dec 4, 2023

Context

Contribution guidelines

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

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
Copy link
Owner

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

Repository owner locked and limited conversation to collaborators Dec 4, 2023
@squidfunk squidfunk converted this issue into discussion #6432 Dec 4, 2023

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants