Material theme admonition icons do not render correctly

[raqbit]

When generating PDFs from material-theme style docs with admonition blocks, the material icons do not get rendered correctly. It seems like something goes wrong when adding the font to the pdf.

Example:

Looks like

Log output:

ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot#iefix&v=4.7.0"
ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0"
ERROR: Failed to load font at "file:///tmp/tmpw6mo9adz/assets/fonts/specimen/MaterialIcons-Regular.woff2"
ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot#iefix&v=4.7.0"
ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0"
ERROR: Failed to load font at "file:///tmp/tmpw6mo9adz/assets/fonts/specimen/MaterialIcons-Regular.woff2"
ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot#iefix&v=4.7.0"
ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0"
ERROR: Failed to load font at "file:///tmp/tmpw6mo9adz/assets/fonts/specimen/MaterialIcons-Regular.woff2"
ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot#iefix&v=4.7.0"
ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0"
ERROR: Failed to load font at "file:///tmp/tmpw6mo9adz/assets/fonts/specimen/MaterialIcons-Regular.woff2"
ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot#iefix&v=4.7.0"
ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0"
ERROR: Failed to load font at "file:///tmp/tmpw6mo9adz/assets/fonts/specimen/MaterialIcons-Regular.woff2"
ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot#iefix&v=4.7.0"
ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0"
ERROR: Failed to load font at "file:///tmp/tmpw6mo9adz/assets/fonts/specimen/MaterialIcons-Regular.woff2"
ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot#iefix&v=4.7.0"
ERROR: Failed to load font at "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0"
...

[raqbit]

Okay, seems like the reason the icons didn't load is because the recommended stylesheet does not include the Material Icons font-family. After adding it, the icons loaded correctly.

[shauser]

Can you please post what exactly you added where (or even better: provide a pull request)? Since I don't have the problem, I can't really fix this otherwise.

[andrewpriddis]

@raqbit I have the same problem and am not sure where to add the font family. Can you describe your solution more?

[raqbit]

@siddirp What I did is I added Material Icons as a fallback font to the css:

@page {
    font-family: "Roboto", "Material Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

While this did fix it when generating on my local machine, I did not get this to work when running using CI.

Edit: It seems like this (^) was never the fix, but for me it will generate icons fine when running locally but will fail when running in a CI environment. Maybe this has to do with some fonts or graphical libraries being available on the system?

[raqbit]

To get the same environment: I am using the docker image python:3.7.0-stretch in the CI setup.

[raqbit]

After updating to a docker image based on Debian buster, the issue solved itself. It seems to be related to the version of a dependency in Debian stretch.

[zhaoterryy]

Interesting.. I'm going to close this for now. Feel free to open another issue.