LAB // KIRBY PLUGIN Active

Material Symbols Kirbytext Plugin

A lightweight Kirbytext … tag that renders Google Material Symbols (outlined & rounded variants) with custom inline styling and zero external runtime dependencies.

GitHub Repository

Overview

The creativeguy78/material-icons plugin brings Google Material Symbols directly into Kirbytext markdown fields without needing raw HTML blocks or cumbersome span elements.

Key Capabilities

  • Zero Runtime Dependencies: Pure Kirby plugin using native string interpolation and HTML escaping.
  • Style Variants: Supports both outlined (default) and rounded font families on the fly.
  • Inline Styling: Pass arbitrary CSS rules through the style attribute (e.g. font size, color, vertical alignment).

Syntax & Usage

<span class="material-symbols-outlined">arrow_forward</span>
<span class="material-symbols-outlined">check_circle</span>
<span class="material-symbols-outlined" style="font-size: 20px; vertical-align: middle;">mail</span>

Architectural Design

Kirby 5 introduces strict security boundaries and sanitization. By routing through Kirby::plugin('creativeguy78/material-icons', ['tags' => ...]), icon strings are sanitized via html() while preserving safe inline presentation styles.