Does GH Pages not render custom icons?

[5jt]

I’m converting the documentation of GitHub repo Tatin to Material for MkDocs. The conversion is in my fork, going well, and visible at https://5jt.github.io/Tatin.

The home page includes two custom icons, for which the source is in docs/overrides/.icons/dyalog. The icons are rendered correctly on my local machine in Live Preview and also in docs/site/index.html.

But on GH Pages only the FontAwesome icons are rendered, the custom icons appear as e.g. :dyalog-tatin-logo:.

Is this a known issue? Is there some tweak needed to .github/workflows/ci.yml?

If this is new to everyone, I’ll report it with a minimum version to replicate.

[kamilkrzyskow]

Hello @5jt,
do you run it locally the same way you do in CI?

In CI you run

mkdocs gh-deploy --force -f docs/mkdocs.yml -v

and in your mkdocs.yml file I see:

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

If I remember correctly, the "paths" input into Python Markdown Extension should be relative to the CWD of the python interpreter, not relative to the mkdocs.yml file.

I guess you run it locally with mkdocs serve so your CWD is the same as mkdocs.yml
And your CI uses the -f docs/mkdocs.yml flag, so the CWD is different than the mkdocs.yml file.

EDIT:
Ah, as for the fix, you could change the run command cd docs; mkdocs ... or use a hook with on_config event to change working directory at runtime.

[kamilkrzyskow]

Is there a reason why the logo was made to be so wide?

Also instead of using !important you could just match the specificity of the previous selector:

[5jt]

Yes… in the sites whose stylesheet I inherited. But not here, out it goes. Thanks!