XAML: How to embed XAML geometry image in to a button

In WPF, I have many icons which I want to display within their own button using XAML. However, I want to use images which are purely XAML-based. These are basically converted from SVG.

I've been able to create my splash screen using XAML images by adding a DataTemplate and referring to it with a ContentPresenter in a Canvas and specifically adding the size and position by doing this.

                <Canvas Margin="25,40,0,0">
                    <ContentPresenter Width="175" x:Name="imagelogoplay" ContentTemplate="{StaticResource img-circled-play}"/>
                </Canvas>

Select allOpen in new window

I've been using the below code to create an image with an image inside.

        <StackPanel HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="1">
            <Button Width="64" Height="64">
                <Canvas>
                    <ContentPresenter ContentTemplate="{StaticResource img-hand}"/>
                </Canvas>
            </Button>
        </StackPanel>

Select allOpen in new window

However, the image stays a static size no matter what values I use either in the canvas or the content presenter.


I also thought about putting the canvas in to a viewbox. However, this makes the image disappear completely.

I'm pretty new to XAML so would appreciate if someone could shed light on this.

I've attached the icons.xaml file which I am using as a resource which contains the "img-hand" data template.
icons.xaml