Skip to content
Jan Karger ツ ☀ edited this page Dec 18, 2019 · 6 revisions

PackIcon MarkupExtensions (WPF and UWP)

A faster way to get an Icon for any ContentControl is to use the PackIcon MarkupExtension(s).

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

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

<!-- or -->

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

2019-12-18_10h45_01

<StackPanel Orientation="Horizontal">
    <Button Content="{iconPacks:BoxIcons Kind=LogosApple}" />
    <Button Content="{iconPacks:Entypo Kind=Adjust}" />
    <Button Content="{iconPacks:EvaIcons Kind=AlertTriangleOutline}" />
    <Button Content="{iconPacks:FeatherIcons Kind=AlertTriangle}" />
    <Button Content="{iconPacks:FontAwesome Kind=AddressBookRegular}" />
    <Button Content="{iconPacks:Ionicons Kind=AnalyticsiOS}" />
    <Button Content="{iconPacks:JamIcons Kind=Anchor}" />
    <Button Content="{iconPacks:Material Kind=AccessPoint}" />
    <Button Content="{iconPacks:MaterialDesign Kind=AccessAlarm}" />
    <Button Content="{iconPacks:MaterialLight Kind=Alarm}" />
    <Button Content="{iconPacks:Microns Kind=Audio}" />
    <Button Content="{iconPacks:Modern Kind=Alert}" />
    <Button Content="{iconPacks:Octicons Kind=Archive}" />
    <Button Content="{iconPacks:PicolIcons Kind=Accept}" />
    <Button Content="{iconPacks:RPGAwesome Kind=AlienFire}" />
    <Button Content="{iconPacks:SimpleIcons Kind=AdobeCreativeCloud}" />
    <Button Content="{iconPacks:Typicons Kind=Anchor}" />
    <Button Content="{iconPacks:Unicons Kind=AccessibleIconAlt}" />
    <Button Content="{iconPacks:WeatherIcons Kind=DayCloudy}" />
    <Button Content="{iconPacks:Zondicons Kind=Anchor}" />
</StackPanel>

2019-12-18_10h55_49

It's also possible to use some properties of the MarkupExtension like this:

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

iconpacks_spinner

Genral (generic) MarkupExtension (only WPF)

There is also a general (generic) MarkupExtension available (only WPF). With this MarkupExtension you can use any IconPack enumeration. This MarkupExtension is only available with the MahApps.Metro.IconPacks NuGet package.

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

2019-12-18_10h49_23

PackIcon Image MarkupExtensions (only WPF)

It's possible to use all icons for as an ImageSource with the PackIcon image MarkupExtension.

<StackPanel Orientation="Horizontal">
    <StackPanel.Resources>
        <Style TargetType="Image">
            <Setter Property="Margin" Value="1" />
            <Setter Property="Width" Value="16" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
    </StackPanel.Resources>
    <Image Source="{iconPacks:BoxIconsImage Kind=LogosApple}" />
    <Image Source="{iconPacks:EntypoImage Kind=Adjust}" />
    <Image Source="{iconPacks:EvaIconsImage Kind=AlertTriangleOutline}" />
    <Image Source="{iconPacks:FeatherIconsImage Kind=AlertTriangle}" />
    <Image Source="{iconPacks:FontAwesomeImage Kind=AddressBookRegular}" />
    <Image Source="{iconPacks:IoniconsImage Kind=AnalyticsiOS}" />
    <Image Source="{iconPacks:JamIconsImage Kind=Anchor}" />
    <Image Source="{iconPacks:MaterialImage Kind=AccessPoint}" />
    <Image Source="{iconPacks:MaterialDesignImage Kind=AccessAlarm}" />
    <Image Source="{iconPacks:MaterialLightImage Kind=Alarm}" />
    <Image Source="{iconPacks:MicronsImage Kind=Audio}" />
    <Image Source="{iconPacks:ModernImage Kind=Alert}" />
    <Image Source="{iconPacks:OcticonsImage Kind=Archive}" />
    <Image Source="{iconPacks:PicolIconsImage Kind=Accept}" />
    <Image Source="{iconPacks:RPGAwesomeImage Kind=AlienFire}" />
    <Image Source="{iconPacks:SimpleIconsImage Kind=AdobeCreativeCloud}" />
    <Image Source="{iconPacks:TypiconsImage Kind=Anchor}" />
    <Image Source="{iconPacks:UniconsImage Kind=AccessibleIconAlt}" />
    <Image Source="{iconPacks:WeatherIconsImage Kind=DayCloudy}" />
    <Image Source="{iconPacks:ZondiconsImage Kind=Anchor}" />
</StackPanel>

2019-12-18_11h04_59

PackIcon Image general (generic) MarkupExtensions (only WPF)

In addition, there is also a general (generic) MarkupExtension available. This MarkupExtension is only available with the MahApps.Metro.IconPacks NuGet package.

<Image Source="{iconPacks:PackIconImage Kind={x:Static iconPacks:PackIconMaterialKind.Cookie}}" />

2019-12-18_11h09_56