Social plugin unable to load logo icon from custom icon set

[bzoel]

Context

No response

Bug description

When mkdocs-material is configured with a custom icon set and the social plugin, the social plugin looks in the wrong place for the icon.

mkdocs.yml

site_name: My Docs
site_url: https://localhost:8000
theme:
  name: material
  custom_dir: overrides
  icon:
    logo: iconset1/myicon
plugins:
  - search
  - social

% mkdocs build
INFO     -  Cleaning site directory
INFO     -  Building documentation to directory: /Users/bz/dev/mkdocs-test/site
Traceback (most recent call last):
  File "/Users/bz/dev/mkdocs-test/venv/bin/mkdocs", line 8, in <module>
    sys.exit(cli())
  File "/Users/bz/dev/mkdocs-test/venv/lib/python3.10/site-packages/click/core.py", line 1130, in __call__
    return self.main(*args, **kwargs)
  File "/Users/bz/dev/mkdocs-test/venv/lib/python3.10/site-packages/click/core.py", line 1055, in main
    rv = self.invoke(ctx)
  File "/Users/bz/dev/mkdocs-test/venv/lib/python3.10/site-packages/click/core.py", line 1657, in invoke
    return _process_result(sub_ctx.command.invoke(sub_ctx))
  File "/Users/bz/dev/mkdocs-test/venv/lib/python3.10/site-packages/click/core.py", line 1404, in invoke
    return ctx.invoke(self.callback, **ctx.params)
  File "/Users/bz/dev/mkdocs-test/venv/lib/python3.10/site-packages/click/core.py", line 760, in invoke
    return __callback(*args, **kwargs)
  File "/Users/bz/dev/mkdocs-test/venv/lib/python3.10/site-packages/mkdocs/__main__.py", line 250, in build_command
    build.build(cfg, dirty=not clean)
  File "/Users/bz/dev/mkdocs-test/venv/lib/python3.10/site-packages/mkdocs/commands/build.py", line 332, in build
    config.plugins.run_event('post_build', config=config)
  File "/Users/bz/dev/mkdocs-test/venv/lib/python3.10/site-packages/mkdocs/plugins.py", line 522, in run_event
    result = method(**kwargs)
  File "/Users/bz/dev/mkdocs-test/venv/lib/python3.10/site-packages/material/plugins/social/plugin.py", line 173, in on_post_build
    promise.result()
  File "/opt/homebrew/Cellar/python@3.10/3.10.8/Frameworks/Python.framework/Versions/3.10/lib/python3.10/concurrent/futures/_base.py", line 451, in result
    return self.__get_result()
  File "/opt/homebrew/Cellar/python@3.10/3.10.8/Frameworks/Python.framework/Versions/3.10/lib/python3.10/concurrent/futures/_base.py", line 403, in __get_result
    raise self._exception
  File "/opt/homebrew/Cellar/python@3.10/3.10.8/Frameworks/Python.framework/Versions/3.10/lib/python3.10/concurrent/futures/thread.py", line 58, in run
    result = self.fn(*self.args, **self.kwargs)
  File "/Users/bz/dev/mkdocs-test/venv/lib/python3.10/site-packages/material/plugins/social/plugin.py", line 180, in _cache_image
    image = render_function()
  File "/Users/bz/dev/mkdocs-test/venv/lib/python3.10/site-packages/material/plugins/social/plugin.py", line 160, in <lambda>
    render_function = lambda: self._render_card(site_name, title, description)
  File "/Users/bz/dev/mkdocs-test/venv/lib/python3.10/site-packages/material/plugins/social/plugin.py", line 195, in _render_card
    self._resized_logo_promise.result(),
  File "/opt/homebrew/Cellar/python@3.10/3.10.8/Frameworks/Python.framework/Versions/3.10/lib/python3.10/concurrent/futures/_base.py", line 451, in result
    return self.__get_result()
  File "/opt/homebrew/Cellar/python@3.10/3.10.8/Frameworks/Python.framework/Versions/3.10/lib/python3.10/concurrent/futures/_base.py", line 403, in __get_result
    raise self._exception
  File "/opt/homebrew/Cellar/python@3.10/3.10.8/Frameworks/Python.framework/Versions/3.10/lib/python3.10/concurrent/futures/thread.py", line 58, in run
    result = self.fn(*self.args, **self.kwargs)
  File "/Users/bz/dev/mkdocs-test/venv/lib/python3.10/site-packages/material/plugins/social/plugin.py", line 334, in _load_resized_logo
    logo = self._load_logo(config)
  File "/Users/bz/dev/mkdocs-test/venv/lib/python3.10/site-packages/material/plugins/social/plugin.py", line 368, in _load_logo
    return self._load_logo_svg(path, self.color["text"])
  File "/Users/bz/dev/mkdocs-test/venv/lib/python3.10/site-packages/material/plugins/social/plugin.py", line 373, in _load_logo_svg
    data = open(path).read()
FileNotFoundError: [Errno 2] No such file or directory: '/Users/bz/dev/mkdocs-test/venv/lib/python3.10/site-packages/material/.icons/iconset1/myicon.svg'

Related links

• Changing the logo and icons

Similar to Issue 4812, except in my case, a custom icon set is being used instead of a custom image.

Reproduction

Note: I have commented out the custom_dir in the reproduction so that the info plugin would run. This customization is mentioned in the logo and icons documentation that I referenced.
example.zip

Steps to reproduce

1. Uncomment theme.custom_dir in mkdocs.yml
2. mkdocs build or mkdocs serve
3. Error from the social plugin looking in the material theme folder instead of the override folder FileNotFoundError: [Errno 2] No such file or directory: '/Users/bz/dev/mkdocs-test/venv/lib/python3.10/site-packages/material/.icons/iconset1/myicon.svg'

Browser

Chrome

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues or 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. From your example, we can see that you haven't followed the additional icons guide, which is essential to add custom icons. Please try that and report if that helps. As a workaround, you may directly reference the SVG as a logo.

[bzoel]

Hi @squidfunk

I did follow the additional icons guide. In my reproduction, I had an SVG icon file located at overrides/.icons/iconset1/myicon.svg. It looks the the info plugin didn't include that folder in the zip though.

I'm not sure if you're suggesting adding the following from the additional icons guide:

markdown_extensions:
  - pymdownx.emoji:
      emoji_index: !!python/name:materialx.emoji.twemoji
      emoji_generator: !!python/name:materialx.emoji.to_svg
      options:
        custom_icons:
          - overrides/.icons

I did test with that (no change), but left it out of the reproduction in an attempt to include the minimal configuration (since I am not trying to use the icon within markdown).

What else can I provide that would help track this down?

[m4g3s]

You may have the wrong destination try adding a ./

Here's how mine looks:

options:
        custom_icons:
          - './overrides/.icons'

[bzoel]

You may have the wrong destination try adding a ./

Here's how mine looks:

options:
        custom_icons:
          - './overrides/.icons'

Thanks - but this bug isn't related to the pymdownx.emoji config. It's related to theme.custom_dir. I did try adjusting the theme.custom_dir path to ./overrides though as you suggested, and no change.

[squidfunk]

So, I checked your example and it doesn't contain the overrides, so I can't test your logo. However, I've just taken another icon from somewhere and built an example how to achieve what you want. In a nutshell: the social plugin won't search additional icon paths. If you want to use a custom icon, just reference it in theme.logo:

theme:
  logo: images/logo.svg

One limitation of this approach is that the logo must be contained in the docs folder – it currently can't be set in overrides to be visible by the social plugin. I have started building the next iteration of the social plugin which will not have this limitation and will be infinitely more flexible than the current version. This, however, will take some time, so I currently can't estimate when it will be released, but very likely later this year.

I'm considering this issue as resolved by a configuration change. Here's your example.zip with a custom logo.

[bzoel]

Thanks. I'm not sure that I would agree that this is resolved by config change.

When using theme.logo, the image is pulled in as using an HTML img tag. When using theme.icon.logo, the image is pulled in using the svg tag. This results in a different appearance for the image based on which one you use.

I am trying to use theme.icon.logo, and it doesn't seem like the workaround you suggested resolves this error in that case.

[squidfunk]

As said, theme.icon.logo + custom icons doesn't work with social cards.

[squidfunk]

Hmm, okay, so to clarify: you're right that the behavior is different, as img and svg tags are handled differently by the browser. img tags will not inherit the color, which makes them static. The problem is that it is not trivial to fix with the current social plugin architecture, i.e. nothing we can rush into the plugin without adding further flags that might induce breaking changes if not done carefully. It will be possible in the next iteration of the plugin, though!

[squidfunk]

Fixed, thanks to the awesome work of @kamilkrzyskow!

[squidfunk]

9.1.9 is out, including the changes referenced in this issue! 🚀