Admonition Icons not apperaring on Azure Static Web App (Preview)

[jromal]

Overview

I am trying the preview of Azure Static Web App, that I think it will be perfect to be used with mkdocs-material.
I am facing a problem, and not sure how to start looking for the problem.

The admonition icons, that appear on the local server or when the site is generated locally, do not appear on the Azure Static Web. I had the same set of documents and configuration files working on github pages (now I have closed it there). Now is on Azure DevOps.

Seek for a solution

Any idea where should I start look? I downloaded in the meantime the bootstrap icons hoping that this could solve the problem. But it does not. I could download material or fontawesome or octicons but I prefer to ask before continue testing.

Can it be a problem on the Azure DevOps pipeline? (it just do a pip, so nothing special)
Maybe some package missing? But I do not know where to check if the icons are not available.
Are they in some folder that I can check the artifact before publishing to the Static Web App?

Can it be that the icons are accessed on the net and it blocks connections? If yes, should the download of icons help or not?

I am not a big expert on markdown or markdown-material, neither on Azure DevOps and therefore what I am asking may be trivial for some of you.

Any idea? Someone that can help?
I appreciate any hint and comment. In any direction.

Thanks.

mkdocs.yml file

This is the file I am using now (changing all things I can imagine to find the problem).
The emojy part was the attempt for the bootstrap icons.

# Project information
site_name: CS Documentation 
use_directory_urls: true 
copyright: Copyright © 2021 Henkel & affiliated. All rights reserved.

# Extensions
markdown_extensions:
# Standard extensions 
# --> https://python-markdown.github.io/extensions/
    - admonition    # note, abstract, info, tip, success, question, warning, failure, danger, bug, example, quote
    - abbr          # 
    - attr_list
    - def_list
    - meta  
    - footnotes    
    - toc:
        permalink: "#"
        separator: "_"
        toc_depth: 3
# pydmdown extensions 
# --> https://facelessuser.github.io/pymdown-extensions/
    - pymdownx.caret
    - pymdownx.mark
    - pymdownx.tilde
    - pymdownx.smartsymbols
    - pymdownx.tabbed
    - pymdownx.keys
    - pymdownx.superfences
    - pymdownx.details
    - pymdownx.snippets
    - pymdownx.tasklist

    # ### Python Mdown emojy
    - pymdownx.emoji:
        emoji_index: !!python/name:materialx.emoji.twemoji
        emoji_generator: !!python/name:materialx.emoji.to_svg
        options:
          custom_icons:
            - overrides/.icons

# Plugins (add "search" if you add any other one)
plugins:
    - search
    - awesome-pages:
        # collapse_single_pages: true

# Theme settings
theme:
  name: material
  custom_dir: overrides 
  logo: images/logo.png

  features:
    - navigation.instant
    - navigation.top
    - navigation.tracking
    # - navigation.tabs
    # - navigation.expand
    # - navigation.sections
    # - toc.integrate

  palette:
    # Light mode
    - media: "(prefers-color-scheme: light)"
      scheme: default
      primary: companydx
      accent: companyred
      toggle:
        icon: material/weather-night
        name: Switch to dark mode
    # Dark mode
    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      primary: companyred
      accent: companydx
      toggle:
        icon: material/weather-sunny
        name: Switch to light mode

# Additional CSS styles and Java Scripts
extra_css:
    - stylesheets/extra.css
    - stylesheets/details.css
extra_javascript:
    - javascripts/extra.js
    - javascripts/details.js

[jromal]

I can add that neither the Collapsible blocks render the icons. But regular icons with emoji plugin work.
I have downloaded the artifact generated by Azure and it shows the data properly.

But on the Azure Static web app no.

Maybe something related to js files?

I am still lost and any help is more than welcome.
Thanks.

[squidfunk]

Correct, admonition icons are inlined. AFAIK there are some extra hoops that one needs to jump through in order to get static sites working on Azure, see #2192, but I have no experience in doing that, as I'm not using Azure.

[jromal]

As far as I know, admonition icons are inlined into the CSS, which means they should just be available... @squidfunk can probably comment further.

I do see you are using custom overrides for CSS and JS, so without knowing what you are doing there, I can only assume that custom CSS is to blame somehow.

Many thanks to both. Not only for the answer. But for your work. Amazing.

Override folder is empty. Just an empty folder (well, with an "empty" file to avoid the folder is not copied). It is a placeholder for some future tests, but not used now.

The problem in the link is about search function not working, which in my case works without problems. It is also not related to the new (in preview yet) service called Azure Static Web Apps. It is just a serving static pages, not a full server like "Azure Web App". Neither related with the "Azure blob storage" that has a "$web" container that shows Static Web Pages. The answer in the link seems to be related to this.

I will try there. But they will probably ask me to go back here to ask. :-D

Thanks again for your work.

[jromal]

I am trying to understand how admonition icons work. In the file "main.e35208c4.min.css" I find this string for the admonition "note" icon.

root{--md-admonition-icon--note:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z'/></svg>");

I understand that this is what you mean that they are "inlined into the CSS". I guess this is the icon in some format (maybe base64?). I am completely new to that area, so I am trying to guess.

• Is there a way to overwrite them with another icon in my css file?
• On what could depend that the Azure Static Web App server does not generate it?
• Are there some standards on this "inlining" of the icons?

Any hint would help. Considering that I expect Azure Static Web Apps to grow a lot, maybe it will help other people too.

Thanks again.

[facelessuser]

I guess this is the icon in some format (maybe base64?)

No, not base 64, but yes inlined.

Is there a way to overwrite them with another icon in my css file?

Sure, overwrite the --md-admonition-icon--note variable with your own. Though, the documentation covers a way to do it via the config which will do the overwrite for you: https://squidfunk.github.io/mkdocs-material/reference/admonitions/#changing-the-icons.

On what could depend that the Azure Static Web App server does not generate it?

Sorry, I don't use Azure.

Are there some standards on this "inlining" of the icons?

Not really, you can kind of research them. You could base64 them, but it isn't as compact. So there is normally what you see in the CSS is what people do. There are some SVGO libraries and such which help to minimize with different options that can compress it to varying degrees. Some options can actually do too much and break things at times, so you have to play around to find what works well for the SVG you are using.

Hopefully, something in what I said helps.

[jromal]

Thanks Isaac,

I followed the instructions on Martin's site and managed to create my own admonition. Icon, colors, ... Really a cool feature. It would be perfect if the text could be done bigger. I created the admonition to be used on the top of the page, with explanation about what is the page about. The font is a bit small for that purpose. Also control of the slate colors would be great. I guess I would have to include the code and do the changes there, but this is more than what I want at the moment. First things, first.

In any case the same problems still happens only on Azure Static pages. I guess maybe a "mime" or "security" check. I am in contact with the Microsoft product owner and hopefully they find the reason.

I will post here the solution if it is found. I need to prepare first a simple page for Microsoft to test it.

Thanks.

[jromal]

I have found the reason of the problem. It was on the configuration file of the "Azure Static Web App".
The file, called staticwebapp.config.json, had this line that when removed everything went back to normal.

  "globalHeaders": {
    "content-security-policy": "default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none'"
  }

No idea really of what is/was the problem behind this setup.

In any case I learned in the meantime to create my own admonitions. Which is good.
Thanks for your time answering and for moving forward your tools. Really good job.