Material Icons Provider

Der material Provider ermöglicht die Verwendung von Google Material Symbols innerhalb einer Knowledge Base.

Die Syntax lautet:

{material:icon-name}

Beispiel:

{material:shield}

Dabei ist material der Provider und shield der Name des gewünschten Symbols.

Verwendung

Material Icons können an verschiedenen Stellen verwendet werden.

Navigation

sections:
  - id: basics
    icon: "{material:menu_book}"
    title:
      de: Grundlagen
      en: Basics

Artikel

Ein Artikel kann ein Icon im Frontmatter definieren:

<!---
id: what-is-phishing
title: Was ist Phishing?
language: de
icon: "{material:help}"
--->

Markdown

Material Icons können direkt im Markdown verwendet werden:

## {material:shield} Schutzmaßnahmen

Das erzeugt ein entsprechendes Material-Symbol innerhalb der Überschrift.

Verfügbare Symbole

Der Wert hinter material: entspricht dem Namen des gewünschten Symbols.

Beispiele:

{material:home}
{material:search}
{material:menu_book}
{material:shield}
{material:warning}
{material:help}
{material:settings}
{material:info}
{material:code}

Google Material Symbols bietet eine große Auswahl weiterer Symbole.

Symbole finden

Die verfügbaren Symbole können direkt über die Google-Material-Symbols-Dokumentation gesucht werden.

Wichtig ist dabei der Name bzw. die Referenz des Symbols. Dieser Name wird hinter material: verwendet.

Beispiel:

{material:security}

Technische Umsetzung

Der Provider implementiert ICodeProvider:

public sealed class MaterialIconProvider : ICodeProvider
{
    public string Name => "material";

    public bool CanHandle(string value)
    {
        return value.StartsWith(
                   "{material:",
                   StringComparison.OrdinalIgnoreCase)
               && value.EndsWith("}", StringComparison.Ordinal);
    }

    public string Process(string value)
    {
        var name = value["{material:".Length..^1].Trim();

        if (string.IsNullOrWhiteSpace(name))
            return string.Empty;

        return $"""
            <span class="material-symbols-outlined">{name}</span>
            """;
    }
}

Der Provider wird über Dependency Injection registriert:

builder.Services.AddSingleton<ICodeProvider, MaterialIconProvider>();

Google Material Symbols einbinden

Damit die erzeugten Icons dargestellt werden können, muss die Material-Symbols-Schriftart in der Website eingebunden sein:

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">

Der Provider selbst kümmert sich nur um die Erzeugung des entsprechenden HTML-Elements.

Beispiele

{material:check}
{material:close}
{material:info}
{material:warning}
{material:security}
{material:shield}
{material:search}

Beispielsweise:

{material:shield}

wird zu:

<span class="material-symbols-outlined">shield</span>

Escaping

Soll ein Provider-Ausdruck nur als Text dargestellt werden, kann er escaped werden:

\{material:shield}

Das Ergebnis ist:

{material:shield}

Innerhalb von Codeblöcken und Inline-Code wird die Syntax ebenfalls nicht verarbeitet.