24. June 2015

Freie Vektor-Icons in Material Design

Materialdesignicons.com

Guten Morgen,

ehrlich gesagt kann ich es kaum abwarten, dass 4k-Monitore endlich überall verwendet werden. Allerdings bringen hochauflösende Bildschirme, wie sie heute auch in den meisten Smartphones eingesetzt werden, eine große Herausforderung mit sich: freie Skalierbarkeit, um jeder Auflösung gerecht zu werden. Gerade in Hinblick auf Icons haben viele Anwendungen hier noch Defizite.

Allen, die Vector-Icons suchen, welche sich perfekt an jede Auflösung und DPI anpassen, kann ich materialdesignicons.com empfehlen. Dort findet sich eine große Auswahl an Icons für die häufigsten Applikationsfunktionen, Softwares und mehr. Alle Icons stehen in verschiedenen Formaten zur Verfügung, so bspw. SVG, Web-Font und sogar XAML.

Es gibt verschiedene Wege ein XAML-Icon in einem Programm einzubinden (marterialdesignicons.com zeigt einen davon). Allerdings ist der beste Weg meiner Meinung nach die Erstellung eines ResourceDictionaries, in das jedes Icon als DrawingImage eingefügt wird, das ein GeometryDrawing enthält.

<DrawingImage x:Key="IconSave">
  <DrawingImage.Drawing>
    <DrawingGroup>
      <DrawingGroup.Children>
        <GeometryDrawing Brush="Black"
                                        Geometry="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />
      </DrawingGroup.Children>
    </DrawingGroup>
  </DrawingImage.Drawing>
</DrawingImage>

Das Schöne an diesem Vorgehen ist die Einfachheit, mit der sich das Icon überall in der GUI einfügen lässt:

<MenuItem Name="Save"
Header="{x:Static ms:Resources.MainMenu_Save}">
<MenuItem.Icon>
<Image Source="{StaticResource IconSave}" />
</MenuItem.Icon>
</MenuItem>

Um den Pfad für das GeometryDrawing aus dem XAML Icon zu kriegen, macht man einen Rechtsklick auf das jeweilige Icon in der Vorschau von materialdesignicons. Der Menüpunkt "View XAML" zeigt den XAML-Code zum Einbinden des Icons an, aus dem das Data-Attribut des Path einfach herauskopiert werden kann.

<Viewbox Width="48" Height="48">
<Canvas Width="24" Height="24">
<Path Data="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" Fill="Black" />
</Canvas>
</Viewbox>

Zur Verwendung der Web-Font gibt es eine sehr gute Anleitung unter materialdesignicons.com/getting-started.

Zum Zeitpunkt der Erstellung dieses Artikels, werden alle Icons auf materialdesignicons.com unter der SIL Open Font License, Version 1.1 angeboten.