Materielles Design

Source

Von Google gibt es einen Satz von Icons nach deren Material-Design-Gestaltungsrichtlinien – die Symbole kommen einem sehr bekannt vor, weil sie auf vielen Webseiten benutzt werden. Da sie unter einer freizügigen Lizenz stehen, spricht (jedenfalls rechtlich) nichts dagegen, sie ebenfalls zu benutzen. Wie macht man das?

Auf Webseiten

Die Icons können als Webfont (WOFF2) benutzt werden – direkt über einen Link zu einem CDN (content delivery network), wobei man Spuren hinterlässt, die vielleicht unerwünscht sind, oder indem man den Font über seinen Webserver selbst ausliefern lässt. Hierzu kann man ihn (und dazu passende CSS-Dateien) herunterladen (Näheres siehe https://fonts.google.com/icons) oder über seine Linuxdistribution installieren (Debian: fonts-materialdesignicons-webfonts).

Alternativ kann man, insbesondere wenn man nur wenige Icons nutzen will, die SVG-Daten von besagter Webseite herunterladen und direkt in seine HTML-Seite einbetten, entweder an jeder Stelle, an der sie vorkommen sollen, oder einmal im Verborgenen und dann per use-Element referenzieren:

<p>
  Text vorher
  <svg width="1.5em" height="1em" viewbox="0 0 16 16">
    <title>Symbol erledigt</title>
    <use href="#md-done-outline" />
  </svg>
  und Text dahinter
</p>

<!-- … und unten auf der Seite dann … -->

<div id="md-icons" hidden>
  <svg id="md-done-outline"
       xmlns="http://www.w3.org/2000/svg" height="24px"
       viewBox="0 -960 960 960" width="24px" fill="#1f1f1f">
    <path d="m381-240 424-424-57-56-368 367-169-170-57 … 172 168-538 538Z"/>
  </svg>
</div>

In Dokumenten

Auch in gedruckten bzw. druckbaren Dokumenten kann man diese Icons verwenden. Dafür ist es zweckmäßig, sie als Truetype-Font zu installieren, beispielsweise als Debian-Paket fonts-material-design-icons-iconfont, das auch Webfonts und CSS-Dateien enthält. Anschließend lassen sich die Icons in LibreOffice, LaTeX und Typst problemlos benutzen. Für letzteres hier ein Beispiel, das eine selbstdefinierte Funktion verwendet:

#let md-icon(it) = {
  text(font: "Material Icons", baseline: 0.13em, ligatures: true, it)
}

Willst Du mit mir ins Kino #md-icon[movie] gehen #md-icon[check_box]
oder lieber nicht #md-icon[cancel]? Gib mir schnell #md-icon[fast_forward]
Bescheid.

Damit werden Ihre Texte viel ansprechender für Leser, die Emojis gewohnt sind und von größeren Buchstabenansammlungen leicht irritiert werden.