SVG (Emoji) support for translation selector

[Andre601]

It would be a nice feature to have the option of defining an emoji or SVG for the displayed text of the Language selector.

This could add a bit of variation by f.e. displaying the flag corresponding to the language (Which may also be useful to distinguish same languages with different dialect/grammar).
This would probably require the usage of the MaterialX lib a bit more, if the :emoji: syntax should be used... Alternatively could a icon option be applied to define a path to the SVG icon in question.

This isn't an important or very useful idea, so I won't be sad if that won't be a thing...

[squidfunk]

Thanks for suggesting. Note that, albeit not entirely what you want, it's possible to change the language selector icon:

theme:
  icon:
    alternate: octicons/globe-24

However, to add a flag next to a language, we'd need to add an SVG library with flags. You can do that via icon customization, as explained in the documentation. Then, you could override the header.html where the language selector is defined and add the appropriate logic yourself. If many users need it, we can add it, but it's the first time I hear about it, so no plans.

[Andre601]

However, to add a flag next to a language, we'd need to add an SVG library with flags.

Wouldn't there be a way to use the SVG Emojis from twemoji that would be part of the pymdownx emoji extension? Seems like less effort as you wouldn't need to first include the emojis at the possible downside(?) of needing the extension.

I'll look into that header.html override. Thing is, that in my case is the language selector set up/generated with the i18n plugin, so I probs need to check first if I can change something there... Or more precisely what logic that plugin uses to apply the language selector.

[squidfunk]

Wouldn't there be a way to use the SVG Emojis from twemoji that would be part of the pymdownx emoji extension?

None that I know off.

[Andre601]

Managed to achieve something that works.

The aproach I chose is - at least for me - a bit hacky tho. Had to apply a <style> tag to the header.html partial due to a current issue with the i18n plugin not using/overriding extra_css I set in mkdocs.

  <style>
    .md-icon__lang svg {
      height: 1rem;
      width: auto;
      vertical-align: text-top;
    }
  </style>

I then used this approach here:

    {% if config.extra.alternate %}
      <div class="md-header__option">
        <div class="md-select">
          {% set icon = config.theme.icon.alternate or "material/translate" %}
          <button class="md-header__button md-icon" aria-label="{{ lang.t('select.language.title') }}">
            {% include ".icons/" ~ icon ~ ".svg" %}
          </button>
          <div class="md-select__inner">
            <ul class="md-select__list">
              {% for alt in config.extra.alternate %}
                {% set lang_icon = alt.lang %}
                <li class="md-select__item">
                  <a href="{{ alt.link | url }}" hreflang="{{ alt.lang }}" class="md-select__link md-icon__lang">
                    {% include ".icons/flags/" ~ lang_icon ~ ".svg" %}
                    {{ alt.name }}
                  </a>
                </li>
                {% endfor %}
            </ul>
          </div>
        </div>
      </div>
    {% endif %}

Basically, I have SVGs of the twemoji flags saved as the lang code (i.e. en.svg) and use the alternate's lang option to include the SVG.
It certainly isn't failproof, but since this is something I will mostly work on, should it be fine for now.

[squidfunk]

Awesome, thanks for sharing!