Customizing styles for the PackIcon control - MahApps/MahApps.Metro.IconPacks GitHub Wiki

Customizing the PackIcon control (WPF and UWP)

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

So you can e.g. create a custom resource dictionary (called here CustomIconPacksStyles.xaml) and add it to the resource dictionary of your App.xaml.

<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>
                
                <!-- your custom icon resource -->
                <ResourceDictionary Source="pack://application:,,,/IconPacksTest;component/CustomIconPacksStyles.xaml" />

                <!-- For UWP replace this

                pack://application:,,,/

                with

                ms-appx:///

                -->

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

In your CustomIconPacksStyles.xaml you can now change the properties for your PackIcon controls.

<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 the original resource dictionary if you use the complete NuGet package (only WPF) -->

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

        <!-- Or reference one of the necessary original resource dictionaries (WPF and UWP).

        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks.BoxIcons;component/Themes/PackIconBoxIcons.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks.Entypo;component/Themes/PackIconEntypo.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks.EvaIcons;component/Themes/PackIconEvaIcons.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks.FeatherIcons;component/Themes/PackIconFeatherIcons.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks.FontAwesome;component/Themes/PackIconFontAwesome.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks.Ionicons;component/Themes/PackIconIonicons.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks.JamIcons;component/Themes/PackIconJamIcons.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks.Material;component/Themes/PackIconMaterial.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks.MaterialDesign;component/Themes/PackIconMaterialDesign.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks.MaterialLight;component/Themes/PackIconMaterialLight.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks.Microns;component/Themes/PackIconMicrons.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks.Modern;component/Themes/PackIconModern.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks.Octicons;component/Themes/PackIconOcticons.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks.PicolIcons;component/Themes/PackIconPicolIcons.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks.RPGAwesome;component/Themes/PackIconRPGAwesome.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks.SimpleIcons;component/Themes/PackIconSimpleIcons.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks.Typicons;component/Themes/PackIconTypicons.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks.Unicons;component/Themes/PackIconUnicons.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks.WeatherIcons;component/Themes/PackIconWeatherIcons.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.IconPacks.Zondicons;component/Themes/PackIconZondicons.xaml" />

        <!-- For UWP replace this

        pack://application:,,,/

        with

        ms-appx:///

        -->
    </ResourceDictionary.MergedDictionaries>

    <!-- Now make some global changes for the PackIcon controls without using new keys -->

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

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

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

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

</ResourceDictionary>

All available style keys (WPF and UWP)

  • MahApps.Styles.PackIconControl (only WPF)
  • MahApps.Styles.PackIconBoxIcons
  • MahApps.Styles.PackIconEntypo
  • MahApps.Styles.PackIconEvaIcons
  • MahApps.Styles.PackIconFeatherIcons
  • MahApps.Styles.PackIconFontAwesome
  • MahApps.Styles.PackIconIonicons
  • MahApps.Styles.PackIconJamIcons
  • MahApps.Styles.PackIconMaterial
  • MahApps.Styles.PackIconMaterialDesign
  • MahApps.Styles.PackIconMaterialLight
  • MahApps.Styles.PackIconMicrons
  • MahApps.Styles.PackIconModern
  • MahApps.Styles.PackIconOcticons
  • MahApps.Styles.PackIconPicolIcons
  • MahApps.Styles.PackIconRPGAwesome
  • MahApps.Styles.PackIconSimpleIcons
  • MahApps.Styles.PackIconTypicons
  • MahApps.Styles.PackIconUnicons
  • MahApps.Styles.PackIconWeatherIcons
  • MahApps.Styles.PackIconZondicons
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️