MahApps HamburgerMenu with IconPacks icons

Question

I'm sure it's something to do with the MenuItemTemplate but can't find any code to help me correct the issue. The icons don't show at all!

I have a Net.Core 3.1 WPF application

I used NUGET to load the IconPacks 4.1 package using this as a guide.

In my xmal file I reference it like this; xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks because I'm not sure how to reference it otherwise but this works.

        <Grid>
            <iconPacks:PackIconMaterial Kind="EmoticonCool"
                                 VerticalAlignment="Center"
                                 HorizontalAlignment="Center" />
        </Grid>

but I'm trying to get some example MahApps HamburgerMenu code to work. It used 'Segoe MDL2 Assets' font to gain images but I want to use IconPacks. I couldn't get the Segoe stuff to work either.

So the code that doesn't work is;

    <DockPanel>
        <DockPanel.Resources>
            <DataTemplate x:Key="MenuItemTemplate">
                <Grid Height="48" Background="Gray">
                    <!--<i:Interaction.Triggers>
                        <i:EventTrigger EventName="MouseLeftButtonUp">
                            <cal:ActionMessage MethodName="{Binding Tag}"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>-->
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="48"/>
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" FontSize="25" HorizontalAlignment="Center" VerticalAlignment="Center"  />  ****** I'm thinking this is where my problems lies ******
                    <TextBlock Grid.Column="1" VerticalAlignment="Center" FontSize="16" Foreground="White" Text="{Binding Label}"/>
                </Grid>
            </DataTemplate>
        </DockPanel.Resources>

        <Controls:HamburgerMenu Foreground="White" PaneBackground="#FF444444" IsPaneOpen="False" DisplayMode="CompactOverlay" OptionsItemTemplate="{StaticResource MenuItemTemplate}" ItemTemplate="{StaticResource MenuItemTemplate}">
            <Controls:HamburgerMenu.ItemsSource>
                <Controls:HamburgerMenuItemCollection>
                    <Controls:HamburgerMenuIconItem Label="Part Info">
                        <Controls:HamburgerMenuIconItem.Icon>
                            <iconPacks:PackIconMaterial Kind="EmoticonCool" VerticalAlignment="Center" HorizontalAlignment="Center" />
                        </Controls:HamburgerMenuIconItem.Icon>
                        <Controls:HamburgerMenuIconItem.Tag>
                            <TextBlock>Part Info</TextBlock>
                        </Controls:HamburgerMenuIconItem.Tag>
                    </Controls:HamburgerMenuIconItem>
                    <Controls:HamburgerMenuGlyphItem Glyph="M" Label="Main Menu" Tag="ShowMainMenu"/>
                    <Controls:HamburgerMenuGlyphItem Glyph="I" Label="Invoice" Tag="OpenInvoiceMaker"/>
                    <Controls:HamburgerMenuGlyphItem Glyph="R" Label="Reports" Tag="ShowReportsMenu"/>
                </Controls:HamburgerMenuItemCollection>
            </Controls:HamburgerMenu.ItemsSource>
            <Controls:HamburgerMenu.OptionsItemsSource>
                <Controls:HamburgerMenuItemCollection>
                    <Controls:HamburgerMenuGlyphItem Glyph="A" Label="About" Tag="About"/>
                </Controls:HamburgerMenuItemCollection>
            </Controls:HamburgerMenu.OptionsItemsSource>
            <Controls:HamburgerMenu.Content>
                <DockPanel>
                    <Border Background="#FF444444" DockPanel.Dock="Top">
                        <TextBlock x:Name="Header" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="15" Foreground="White" Text="{Binding ActiveItem.DisplayName}" />
                    </Border>
                    <ScrollViewer Grid.Row="1" CanContentScroll="True" IsDeferredScrollingEnabled="False">
                        <Controls:TransitioningContentControl Transition="LeftReplace" x:Name="ActiveItem" Content="{Binding ActiveItem}"/>
                    </ScrollViewer>
                </DockPanel>
            </Controls:HamburgerMenu.Content>
        </Controls:HamburgerMenu>
        <Grid>
            <iconPacks:PackIconMaterial Kind="EmoticonCool"
                                 VerticalAlignment="Center"
                                 HorizontalAlignment="Center" />
        </Grid>
    </DockPanel>

Any helpappreciated

Answer 1

For those that stumbled like me on this problem I'm posting the solution I found.

Turns out the DataTemplate was the problem and I fixed it by using this template instead, which makes sense because I'm not using a TextBlock and the Segoe MDL2 Assets font to display the icon I'm using an actual Icon.

            <DataTemplate x:Key="MenuItemTemplate" DataType="{x:Type Controls:HamburgerMenuItem}">
                <Grid Height="64">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="48" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Column="0">
                        <Viewbox ToolTip="{Binding Label}" Width="24" Height="24" HorizontalAlignment="Center">
                            <Viewbox.Child>
                                <ContentControl Content="{Binding Path=Icon}"></ContentControl>
                            </Viewbox.Child>
                        </Viewbox>
                    </Grid>
                    <TextBlock Grid.Column="1"
                       VerticalAlignment="Center"
                       FontSize="16"
                       Foreground="White"
                       Text="{Binding Label}" />
                </Grid>
            </DataTemplate>