How to change MahApps Icon into URI?

Question

I am using MahApps and AvalonDock for my WPF application, AvalonDock tab header icon can only accept URI icon source. However, from my understanding MahApps icon need to set like below:

<MenuItem.Icon>
    <iconPacks:PackIconMaterial Kind="Close" Foreground="Red" />
</MenuItem.Icon>

But AvalonDock does not accept this when I bind the icon property from the respective ViewModel, how can I change this MahApps icon into URI?

Answer 1

If you look on the GitHub Wiki then you will find the class MenuItemEx which allows you to use the IconTemplate property.

With this you can set the Icon like this:

<MenuItemEx Header="Menu with an icon">
  <MenuItemEx.IconTemplate>
    <DataTemplate>
      <iconPacks:PackIconMaterial Kind="Close" Foreground="Red" />
    </DataTemplate>
  </MenuItemEx.IconTemplate>
</MenuItemEx>

It's also possible to use the PackIcon Image MarkupExtensions to get an Image:

<Grid Orientation="Horizontal">
    <Grid.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>
    </Grid.Resources>

    <Image Source="{iconPacks:MaterialImage Kind=Close, Brush=Red}" />
</Grid>

Or anywhere else where an ImageSource is needed.