Skip to content
Kevin B edited this page Jun 11, 2019 · 5 revisions

Material Design XAML Toolkit comes with material design icons built-in and they are very easy to use.

Just create a PackIcon and set its Kind property to whatever icon you want to use. (All icons type are stored in the PackIconKind enum.)

For an overview of all available icons go to the material design icons website or download the compiled sample project

You can use XAML

<materialDesign:PackIcon Kind="SmileyHappy"/>

Here you'll need to add a namespace reference to your window like this

xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

or you can use Code-Behind

var icon = new PackIcon { Kind = PackIconKind.SmileyHappy };

Here you'll need to add a namespace reference like this

using MaterialDesignThemes.Wpf;

You can change the icon's colour by setting the Foreground property to the desired colour.

XAML

<materialDesign:PackIcon Kind="SmileyHappy" Foreground="Red"/>

Code-Behind

var icon = new PackIcon 
{ 
    Kind = PackIconKind.SmileyHappy,
    Foreground = System.Windows.Media.Brushes.Red
};

You can also use them inside other controls

Using XAML

<Button Name="BtnIcon" Content="{materialDesign:PackIcon SmileyHappy}"
        ToolTip="Icon"/>

Using Code-Behind

BtnIcon.Content = new PackIcon { Kind = PackIconKind.SmileyHappy }
Clone this wiki locally