How to add the specific icon to the button content that we have added in resources in material design in xaml toolkit?

[VahidEra]

Hi guys
I have a button in wpf project using material design and I want to set content of this button to my icon that I added to my resources.
This can be easily done using kind from the material design source, but I want to use my own icon. Is it possible? And if possible, how should I do this?

<Button 
                        HorizontalContentAlignment="Center"
                        VerticalContentAlignment="Center"
                        x:Name="btnMoveWindows"
                        ToolTip="Move Windows"  
                        ToolTipService.InitialShowDelay="200"
                        Content="{md:PackIcon Kind=CursorMove, Size=25}"
                        Foreground="#FF868484"
                        VerticalAlignment="Center" HorizontalAlignment="Center" Width="45" Height="45" Margin="-1,0,0,0"
Padding="7,2,7,2" ScrollViewer.VerticalScrollBarVisibility="Auto"/>

But i want this:

<Button 
                        HorizontalContentAlignment="Center"
                        VerticalContentAlignment="Center"
                        x:Name="btnMoveWindows"
                        ToolTip="Move Windows"  
                        ToolTipService.InitialShowDelay="200"
                        Content="MY ICON IN RESOURCES "
                        Foreground="#FF868484"
                        VerticalAlignment="Center" HorizontalAlignment="Center" Width="45" Height="45" Margin="-1,0,0,0"
Padding="7,2,7,2" ScrollViewer.VerticalScrollBarVisibility="Auto"/>

Thank you very much.

[nicolaihenriksen]

@VahidEra A Button in WPF is a ContentControl which mean you, as a the calling code, gets to choose what content you want to put inside of it.

When you add the below to the Content property, it basically just invokes the PackIconExtension which is a MarkupExtension which returns a PackIcon control with the requested icon kind.
Content="{md:PackIcon Kind=CursorMove, Size=25}"

You don't need to specify the content in this manner, you can simply do something like this:

<Button>
  <StackPanel Orientation="Vertical">
    <TextBlock Text="Hello" />
    <TextBlock Text="World" />
  </StackPanel>
</Button>

This simply creates a button with 2 rows of text.

So depending on what the type of "icon" you have in your resources is, you could follow the same approach. Probably something along the lines of:

<Button>
  <Image Source="...INSERRT RESOURCE PATH HERE..." />
</Button>

You may want to explicitly define the Width/Height properties on the Image; it all depends on your needs of course.

[VahidEra]

@nicolaihenriksen Dear nicolai that's exactly what I wanted. thank you very much