Custom admonition icons

[jasper-zanjani]

Is it possible to incorporate SVG icons with their own colors as an admonition icon?

I've successfully incorporated custom admonitions, but only by removing fill attributes.

:root {
    --md-admonition-icon--gcp: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 256 262" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" /><path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" /><path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" /><path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" /></svg>')
  }
  .md-typeset .admonition.gcp,
  .md-typeset details.gcp {
    border-color: rgb(192, 192, 192);
  }
  .md-typeset .gcp > .admonition-title,
  .md-typeset .gcp > summary {
    background-color: rgba(192, 192, 192, 0.1);
    border-color: rgb(192, 192, 192);
  }
  .md-typeset .gcp > .admonition-title::before,
  .md-typeset .gcp > summary::before {
    background-color: rgb(192, 192, 192);
    -webkit-mask-image: var(--md-admonition-icon--gcp);
            mask-image: var(--md-admonition-icon--gcp);
  }

The original SVG contains fill attributes.
But using it without modification causes a display issue and icon does not appear.

:root {
    --md-admonition-icon--gcp: url('data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 256 262" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" fill="#4285F4"/><path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" fill="#34A853"/><path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" fill="#FBBC05"/><path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" fill="#EB4335"/></svg>')
  }
  .md-typeset .admonition.gcp,
  .md-typeset details.gcp {
    border-color: rgb(192, 192, 192);
  }
  .md-typeset .gcp > .admonition-title,
  .md-typeset .gcp > summary {
    background-color: rgba(192, 192, 192, 0.1);
    border-color: rgb(192, 192, 192);
  }
  .md-typeset .gcp > .admonition-title::before,
  .md-typeset .gcp > summary::before {
    background-color: rgb(192, 192, 192);
    -webkit-mask-image: var(--md-admonition-icon--gcp);
            mask-image: var(--md-admonition-icon--gcp);
  }
  

Thanks for all your amazing effort @squidfunk !

[squidfunk]

Yes, definitely possible, but you would have to patch the mask-image technique and use background-image instead.

[jasper-zanjani]

@squidfunk I wanted to update you on my progress. I figured out that some SVG icons work better with mkdocs-material than others. I was able to get the effect I wanted by using the Material icons, but something about the Font Awesome equivalents just doesn't work.

I'm quite pleased with the results so far, but I was wondering if there is a way to have a blank title without providing a whitespace character in the markdown. Currently I'm able to achieve this effect only with markdown like the following:

!!! rs " "

I tried defining a blank content attribute in the CSS but that didn't seem to work. If I don't define a custom title of some type it takes the name of the admonition class itself.

[squidfunk]

I was wondering if there is a way to have a blank title without providing a whitespace character in the markdown

I don’t know, but maybe the maintainers of Python Markdown could help, as that’s where the Admonition syntax is parsed.

[facelessuser]

The simple answer right now is that you have to provide white space or Python Markdown will not insert a title. Using a simple space is not sufficient as such whitespace, when presented by itself, will be collapsed by the HTML browser. As the icon itself will not contribute to the height of the title in any meaningful way, using &nbsp is a better option as it will force the height of the title to be of a reasonable height.

Now, should Admonitions still insert a title if the title is empty? That may or may not be a bug depending on the intentions of Admonitions. Raising that question over at Python Markdown (as @squidfunk suggested) is probably the best way to move forward.

Should a simple title with a space that essentially renders as an empty title have the title rendered with some reasonable minimum height? That would be a question for MkDocs Material.

[squidfunk]

The .admonition-title element is generated by Python Markdown, not Material for MkDocs, which is why it is not part of the DOM when the title is empty. Empty Admonitions are a feature, so IMHO Python Markdown shouldn't change that behavior, or we'll lose this possibility. I suggest you go with   because this is definitely an edge case, as you're kind of abusing Admonitions, or at least not using them in an intended way.

[facelessuser]

I forgot about empty admonitions! Sounds like this answers it then.