MahApps.Metro.IconPacks

This IconPacks library contains controls to use these awesome icons for WPF (.Net 4.x and .NetCore 3.0) and UWP apps in a simple way.

Icon collection	Version	∑
Complete IconPacks collection with all Icons in one package
Material Design Icons	3.5.95	3595
Material Design Icons Light	0.2.63	257
Material design icons (Google)	3.0.1	932
Font Awesome Free	5.8.1	1516
GitHub Octicons	8.5.0	184
Modern		1260
Entypo+		411
Simple Icons	1.9.24	576
Weather Icons	2.0.10	219
Typicons	2.0.9	336
Feather Icons	4.21.0	279
Ionicons	4.5.5	696
Jam Icons	2.0.0	896
Unicons	0.0.4	1067

It's not necessary to install and use MahApps.Metro, but it makes your WPF application nicer.

Want to say thanks?

This framework is free and can be used for free, open source and commercial applications. It's tested and contributed by many people... So mainly hit the ⭐ button, that's all... thx :squirrel: (💵, 💶, 🍺 or some other gifts are also being accepted...).

Install

To install the IconPacks, run the following commands in the NuGet Package Manager Console or install it with the NuGet Package Manager extension.

MahApps.Metro.IconPacks includes all Icons in one package on NuGet
```
PM> Install-Package MahApps.Metro.IconPacks
```

MahApps.Metro.IconPacks.Material on NuGet

PM> Install-Package MahApps.Metro.IconPacks.Material

MahApps.Metro.IconPacks.MaterialLight on NuGet

PM> Install-Package MahApps.Metro.IconPacks.MaterialLight

MahApps.Metro.IconPacks.MaterialDesign on NuGet

PM> Install-Package MahApps.Metro.IconPacks.MaterialDesign

MahApps.Metro.IconPacks.FontAwesome on NuGet

PM> Install-Package MahApps.Metro.IconPacks.FontAwesome

MahApps.Metro.IconPacks.Octicons on NuGet

PM> Install-Package MahApps.Metro.IconPacks.Octicons

MahApps.Metro.IconPacks.Modern on NuGet

PM> Install-Package MahApps.Metro.IconPacks.Modern

MahApps.Metro.IconPacks.Entypo on NuGet

PM> Install-Package MahApps.Metro.IconPacks.Entypo

MahApps.Metro.IconPacks.SimpleIcons on NuGet

PM> Install-Package MahApps.Metro.IconPacks.SimpleIcons

MahApps.Metro.IconPacks.WeatherIcons on NuGet

PM> Install-Package MahApps.Metro.IconPacks.WeatherIcons

MahApps.Metro.IconPacks.Typicons on NuGet

PM> Install-Package MahApps.Metro.IconPacks.Typicons

MahApps.Metro.IconPacks.FeatherIcons on NuGet

PM> Install-Package MahApps.Metro.IconPacks.FeatherIcons

MahApps.Metro.IconPacks.Ionicons on NuGet

PM> Install-Package MahApps.Metro.IconPacks.Ionicons

MahApps.Metro.IconPacks.JamIcons on NuGet

PM> Install-Package MahApps.Metro.IconPacks.JamIcons

MahApps.Metro.IconPacks.Unicons on NuGet

PM> Install-Package MahApps.Metro.IconPacks.Unicons

Usage

If you want all icons together then just install the MahApps.Metro.IconPacks NuGet package, or install one of the separate NuGet packages.

<StackPanel>
  <iconPacks:PackIconMaterial Kind="EmoticonCool" />
  <iconPacks:PackIconMaterialLight Kind="Heart" />
  <iconPacks:PackIconMaterialDesign Kind="DirectionsBike" />
  <iconPacks:PackIconFontAwesome Kind="FontAwesomeBrands" />
  <iconPacks:PackIconOcticons Kind="MarkGithub" />
  <iconPacks:PackIconModern Kind="ThumbsUp" />
  <iconPacks:PackIconEntypo Kind="EmojiHappy" />
  <iconPacks:PackIconSimpleIcons Kind="StackOverflow" />
  <iconPacks:PackIconWeatherIcons Kind="DaySunny" />
  <iconPacks:PackIconTypicons Kind="Lightbulb" />
  <iconPacks:PackIconFeatherIcons Kind="Anchor" />
  <iconPacks:PackIconIonicons Kind="BeerMD" />
  <iconPacks:PackIconJamIcons Kind="BirthdayCake" />
  <iconPacks:PackIconUnicons Kind="GrinTongueWinkAlt" />
</StackPanel>

Namespace

The Xaml namespace for all icon packs is:

xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"

and for the UWP packages:

xmlns:iconPacks="using:MahApps.Metro.IconPacks"

IconPacks Browser

If you have no idea which icon you're supposed to take, then you can use the IconPacks Browser. You can search in every IconPacks and copy a raw Xaml code snippet to the clipboard.

You can download the latest version of the browser at the release page (a zipped pre-compiled .NET executable is available).

WPF Sample

<Window x:Class="IconPacksTest.App"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
        Title="IconPacks" Height="300" Width="300">

   <Grid>
     <iconPacks:PackIconMaterial Kind="EmoticonCool" VerticalAlignment="Center" HorizontalAlignment="Center" />
   </Grid>

</Window>

UWP Sample

<Page x:Class="MahApps.Metro.IconPacks.Test.App.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:iconPacks="using:MahApps.Metro.IconPacks"
      mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <iconPacks:PackIconFontAwesome Width="32"
                                       Height="32"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"
                                       Kind="AddressBookRegular" />
    </Grid>

</Page>

PathIcon (UWP only)

The PathIcon controls can be used for controls which needs an IconElement derived element for their Icon property like the NavigationViewItem.

<NavigationViewItem>
    <NavigationViewItem.Icon>
        <iconPacks:PathIconTypicons Kind="ThumbsUp" />
    </NavigationViewItem.Icon>
</NavigationViewItem>
<NavigationViewItem>
    <NavigationViewItem.Icon>
        <iconPacks:PathIconFontAwesome Kind="FlagSolid" />
    </NavigationViewItem.Icon>
</NavigationViewItem>

Note: The PathIconFeatherIcons is currently not available, because the path data uses stroke releated data instead fill data. It is not possible to set any stroke related data on the PathIcon control.

MarkupExtension (WPF only)

A faster way to get a Button (or any other ContentControl) with an Icon is to use the MarkupExtension(s).

If you want e.g. a Button with an Icon from the PackIconFontAwesome then you can do this one:

<Button Content="{iconPacks:FontAwesome StarRegular}" />

<!-- or -->

<Button Content="{iconPacks:FontAwesome Kind=StarRegular}" />

It's also possible to change some properties of the icon itself like this:

<Button Content="{iconPacks:FontAwesome SpinnerSolid, Width=32, Height=32, Spin=True}" />

It's also possible to use a general (generic) MarkupExtension:

<Button Content="{iconPacks:PackIcon {x:Static iconPacks:PackIconMaterialKind.Cookie}, Width=32, Height=32}" />

Breaking change 1.9.x -> 2.0

The MarkupExtension class names had to be renamed, cause the old ones doesn't worked well with the Visual Studio Designer (#29, #30).

Before

<Button Content="{iconPacks:PackIconFontAwesome Kind=StarRegular}" />

Now

<Button Content="{iconPacks:FontAwesome Kind=StarRegular}" />

Extra Properties for PackIcon and PathIcon controls

Property	Description
`Kind`	Gets or sets the icon to display. Each IconPack has it's own icon type and an enumeration for it.
`Flip`	Gets or sets the flip orientation. Possible values are `Normal`, `Horizontal`, `Vertical` or `Both` from the enumeration type `PackIconFlipOrientation`.
`Rotation`	Gets or sets the rotation (angle) of the inner icon. Possible values are `0`-`360`.
`Spin`	Gets or sets a value indicating whether the inner icon is spinning (rotating) (`true` or `false`).
`SpinDuration`	Gets or sets the duration of the spinning animation (in seconds). This will also restart the spin animation and works only if `Spin` property is set to `true`.
`SpinEasingFunction`	Gets or sets the EasingFunction (`IEasingFunction`) of the spinning animation. This will also restart the spin animation and works only if `Spin` property is set to `true`.
`SpinAutoReverse`	Gets or sets the AutoReverse of the spinning animation. This will also restart the spin animation and works only if `Spin` property is set to `true`.

Custom Styles for PackIcon controls

Sometimes it's necessary to change some properties for all used icon pack controls. All controls have styles which can be use for global changes or anything else.

For the MahApps.Metro.IconPacks you can e.g. create a custom resource dictionary (called here CustomIconPacksStyles.xaml) and add it to the App.xaml resource tag.

<Application x:Class="IconPacksTest.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <!-- some other resources -->
                
                <!-- your custom icon resource -->
                <ResourceDictionary Source="pack://application:,,,/IconPacksTest;component/Resources/CustomIconPacksStyles.xaml" />

            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Here is the resource dictionary content for all IconPacks in this sample (for CustomIconPacksStyles.xaml).

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks">

    <ResourceDictionary.MergedDictionaries>
        <!-- reference all necessary original resource dictionaries -->
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks;component/Themes/PackIconMaterial.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks;component/Themes/PackIconMaterialLight.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks;component/Themes/PackIconMaterialDesign.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks;component/Themes/PackIconFontAwesome.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks;component/Themes/PackIconOcticons.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks;component/Themes/PackIconModern.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks;component/Themes/PackIconEntypo.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks;component/Themes/PackIconSimpleIcons.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks;component/Themes/PackIconWeatherIcons.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks;component/Themes/PackIconTypicons.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks;component/Themes/PackIconFeatherIcons.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks;component/Themes/PackIconIonicons.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks;component/Themes/PackIconJamIcons.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks;component/Themes/PackIconUnicons.xaml" />
    </ResourceDictionary.MergedDictionaries>

    <!-- now make some global changes for the icon pack controls without using new keys -->

    <Style TargetType="{x:Type iconPacks:PackIconMaterial}" BasedOn="{StaticResource MahApps.Metro.Styles.PackIconMaterial}">
        <Setter Property="Width" Value="32" />
        <Setter Property="Height" Value="32" />
    </Style>

    <Style TargetType="{x:Type iconPacks:PackIconMaterialLight}" BasedOn="{StaticResource MahApps.Metro.Styles.PackIconMaterialLight}">
        <Setter Property="Width" Value="28" />
        <Setter Property="Height" Value="28" />
    </Style>

    <Style TargetType="{x:Type iconPacks:PackIconMaterialDesign}" BasedOn="{StaticResource MahApps.Metro.Styles.PackIconMaterialDesign}">
        <Setter Property="Width" Value="32" />
        <Setter Property="Height" Value="32" />
    </Style>

    <Style TargetType="{x:Type iconPacks:PackIconFontAwesome}" BasedOn="{StaticResource MahApps.Metro.Styles.PackIconFontAwesome}">
        <Setter Property="Width" Value="24" />
        <Setter Property="Height" Value="24" />
    </Style>

    <Style TargetType="{x:Type iconPacks:PackIconOcticons}" BasedOn="{StaticResource MahApps.Metro.Styles.PackIconOcticons}">
        <Setter Property="Width" Value="48" />
        <Setter Property="Height" Value="48" />
    </Style>

    <Style TargetType="{x:Type iconPacks:PackIconModern}" BasedOn="{StaticResource MahApps.Metro.Styles.PackIconModern}">
        <Setter Property="HorizontalAlignment" Value="Center" />
    </Style>

    <Style TargetType="{x:Type iconPacks:PackIconEntypo}" BasedOn="{StaticResource MahApps.Metro.Styles.PackIconEntypo}">
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="HorizontalAlignment" Value="Center" />
    </Style>

    <Style TargetType="{x:Type iconPacks:PackIconSimpleIcons}" BasedOn="{StaticResource MahApps.Metro.Styles.PackIconSimpleIcons}">
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="HorizontalAlignment" Value="Center" />
    </Style>

    <Style TargetType="{x:Type iconPacks:PackIconWeatherIcons}" BasedOn="{StaticResource MahApps.Metro.Styles.PackIconWeatherIcons}">
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="HorizontalAlignment" Value="Center" />
    </Style>

    <Style TargetType="{x:Type iconPacks:PackIconTypicons}" BasedOn="{StaticResource MahApps.Metro.Styles.PackIconTypicons}">
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="HorizontalAlignment" Value="Center" />
    </Style>

    <Style TargetType="{x:Type iconPacks:PackIconFeatherIcons}" BasedOn="{StaticResource MahApps.Metro.Styles.PackIconFeatherIcons}">
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="HorizontalAlignment" Value="Center" />
    </Style>

    <Style TargetType="{x:Type iconPacks:PackIconIonicons}" BasedOn="{StaticResource MahApps.Metro.Styles.PackIconIonicons}">
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="HorizontalAlignment" Value="Center" />
    </Style>

    <Style TargetType="{x:Type iconPacks:PackIconJamIcons}" BasedOn="{StaticResource MahApps.Metro.Styles.PackIconJamIcons}">
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="HorizontalAlignment" Value="Center" />
    </Style>

    <Style TargetType="{x:Type iconPacks:PackIconUnicons}" BasedOn="{StaticResource MahApps.Metro.Styles.PackIconUnicons}">
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="HorizontalAlignment" Value="Center" />
    </Style>

</ResourceDictionary>

If you use the IconPack with all included icons you can also use this resource dictionary:

<ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks;component/Themes/IconPacks.xaml" />

Strong naming: Now

All packages of MahApps.Metro.IconPacks are now strong-named again.

Why?

The author of the (in)famous "Still strong naming your assemblies?" blog article has now done an about-face and now advocates strong-naming your assemblies again in an update to that same blog post:

Though the information and concerns in this blog post are still very true, I’ve actually had a change of heart and I’m now advocating to Start Strong-Naming your Assemblies!!

Start Strong-Naming your Assemblies!

Microsoft's corefx team also now strong-names and while they say not every assembly needs it, it's still useful: https://github.com/dotnet/corefx/blob/master/Documentation/project-docs/strong-name-signing.md

Strong naming: Old

MahApps.Metro.IconPacks will not be strong-named.