How to put an icon into a button (MahApps)

Question

I want to put a icon from the MahApps library into a normal button. I tried it this way:

<Button Height="20" Width="25" Background="Transparent" Foreground="White" Content="{StaticResource appbar_close}"/>

Which ended like this:

So how can I integrate this icon into this button in a suitable position?

Answer 1

You have 2 options.

First you can use the Icon rersources (sample with MetroCircleButtonStyle)

<Button Width="50"
        Height="50"
        Style="{DynamicResource MetroCircleButtonStyle}">
    <Rectangle Width="20"
                Height="20"
                Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
        <Rectangle.OpacityMask>
            <VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_close}" />
        </Rectangle.OpacityMask>
    </Rectangle>
</Button>

and second the new Icon packs

<Button Width="50"
        Height="50"
        Style="{DynamicResource MetroCircleButtonStyle}">
    <Controls:PackIconModern Width="20" Height="20" Kind="Close" />
</Button>

Hope that helps.