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.

Answer 2

As you can see in the github example, they put a Rectangle inside the Button and then use the OpacityMask property.

<ToggleButton Width="50"
          Height="50"
          IsEnabled="False"
          Style="{DynamicResource MetroCircleToggleButtonStyle}">
<Rectangle Width="20"
           Height="20"
           Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ToggleButton}}}">
    <Rectangle.OpacityMask>
        <VisualBrush Stretch="Fill"
                     Visual="{DynamicResource appbar_city}" />
    </Rectangle.OpacityMask>
</Rectangle>

Source

Answer 3

You can try the following ... just as suggested by @ganchito55

<Button Width="25" Height="20">
  <Button.Content>
    <Rectangle Width="20" Height="20">
          <Rectangle.Fill>
            <VisualBrush Visual="{StaticResource appbar_close}" Stretch="None" />
          </Rectangle.Fill>
     </Rectangle>
 </Button.Content>
</Button>