Is _emoji.scss "eating" spaces around SVG icons?

[Andre601]

Currently struggling to use an SVG icon inside a template using the {% include %} option.

The icon itself works fine and kinda displays as it should. What gives me headaches is the fact, that spaces left and right seem to be missing, or at the very least got reduced a lot.

I do wrap the {% include %} part into a span (Also tried with p and div without any real difference) that has the twemoji class applied to it.

The current result looks like this:

Notice, how the calendar SVG has no spaces on its left and right, yet the source shows that there should be any:

One thing I notice too is, that it doesn't seem to "fit" vertically too...
Personally, I blame the flex thing for that, but not sure if that really is the cause.

I do use the mkdocs-blogging plugin to create those text areas and have the following custom HTML template used:

{% extends "blog-card-theme.html" %}

{% macro render_blog(title, description, time, url, page) -%}
<a href="{{ url }}">
  <div class="blog-override-post">
    <h3 class="blog-post-title">{{ title }}</h3>
    <div class="blog-post-extra">
      <aside class="mdx-author">
        <img alt='{{ page.meta["author"] if "author" in page.meta else "Andre601" }}' src='{{ page.meta["author_url"] if "author_url" in page.meta else "/blog/assets/img/icon.jpg" }}'>
        <b>{{ page.meta["author"] if "author" in page.meta else "Andre601" }} · </b>
        <div class="twemoji">
          {% include "icons/calendar.svg" %}
        </div>
        {{ time }}
      </aside>
    </div>
    {% if show_tags and "tags" in page.meta %}
      {% call render_tags(page.meta["tags"], index_url) %}
      {% endcall %}
    {% endif %}
    <p class="blog-post-description">{{ description }}</p>
  </div>
</a>
{{ caller() }}
{%- endmacro %}

From what I can tell does the plugin itself not override or otherwise manipulate any of the CSS used by material for mkdocs and only adds and uses its own variants.

My current source code of the sites can be found here:
https://github.com/Andre601/blog/tree/feature/change-icon

Any help to fix this would be highly appreciated.

[squidfunk]

Are you minifying the final sources?

[facelessuser]

I believe it is your own custom styling. When I remove flex from your element, proper formatting returns:

Granted, now other styling is different, so you'll probably have to work out some compromise. I'm no CSS expert, I just dabble, and I don't have time to debug this 🙃.

[Andre601]

Are you minifying the final sources?

Not that I'm aware of...

BTW, the best idea is to copy the styles from here: https://squidfunk.github.io/mkdocs-material/blog/

Well... I kinda did. But I wanted to keep some own styling myself.

[Andre601]

I believe it is your own custom styling. When I remove flex from your element, proper formatting returns:

Granted, now other styling is different, so you'll probably have to work out some compromise. I'm no CSS expert, I just dabble, and I don't have time to debug this 🙃.

The mdx-author is a 1:1 copy from this repository, so it's technically not my styling :P

[facelessuser]

Ah, well, something would need to be adjusted there. I just don't know what of the top of my head :)

[squidfunk]

.mdx-author uses inline-flex. There may be deviations in overrides on the Insiders repository.

[Andre601]

I'm coming back to this, since I still didn't find a possible fix yet.

But also a question cam up that I hope to get an answer for:
Is there a way to add SVG icons in material using the {% include %} option in Jinja in non-material templates?
Using {% include ".icons/octicons/calendar-24.svg" %} doesn't work in the blog-override.html file I have due to how the include is relative from where it is used(?)

Like the override is located under theme/blog/ (Where theme is the custom_dir defined) and I would like to use the octicon's calendar SVG without the need of having it separately in a folder...

[Andre601]

Managed to find the fix...

Not sure what exactly is the fix tho... My guess is that I missed a single <p> section that the CSS uses.

The Include question is still relevant