MahAppsのHamburgerMenuでMaterialDesignのアイコンをViewModelからバインドする

はじめに

Windows Template StudioからWPFアプリを作成したときに、自動的にMahAppsのHamburgerMenuが作成されるのですが、HamburgerMenuにMaterialDesignのアイコンを利用したいなと思いました。
いろいろ試した結果うまく動作したので覚書も含めて書いておこうと思います。

DataTemplateの作成

IconDataTemplate を作成します
一緒に最初から書かれているHamburgerMenuGlyphItemも参考に併記しておきます

    public class MenuItemTemplateSelector : DataTemplateSelector
    {
        public DataTemplate GlyphDataTemplate { get; set; }

        public DataTemplate IconDataTemplate { get; set; }

        public override DataTemplate SelectTemplate(object item, DependencyObject container)
        {
            if (item is HamburgerMenuGlyphItem)
            {
                return GlyphDataTemplate;
            }

             if (item is HamburgerMenuIconItem)
            {
                return IconDataTemplate;
            }


            return base.SelectTemplate(item, container);
        }
    }

Viewのxaml

MenuItemTemplateSelector.IconDataTemplateのみ書いています。
MenuItemTemplateSelector.GlyphDataTemplateはデフォルトのままなので記載していません

xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

<controls:MetroWindow.Resources>
    <templateSelectors:MenuItemTemplateSelector x:Key="MenuItemTemplateSelector">
        <templateSelectors:MenuItemTemplateSelector.IconDataTemplate>
            <DataTemplate DataType="{x:Type controls:HamburgerMenuIconItem}">
                <Grid Height="48">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="48" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <materialDesign:PackIcon Grid.Column="0"
                                    Kind="{Binding Icon}"
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Center"
                                    Width="32"
                                    Height="32"/>
                    <TextBlock
                        Grid.Column="1"
                        VerticalAlignment="Center"
                        FontSize="16"
                        Text="{Binding Label}" />
                </Grid>
            </DataTemplate>
        </templateSelectors:MenuItemTemplateSelector.IconDataTemplate>
    </templateSelectors:MenuItemTemplateSelector>
</controls:MetroWindow.Resources>

ViewModel

using MahApps.Metro.Controls;
using MaterialDesignThemes.Wpf;

  public ObservableCollection<HamburgerMenuItem> MenuItems { get; } = new ObservableCollection<HamburgerMenuItem>()
  {
      new HamburgerMenuIconItem(){Label = Resources.ShellStartPage,
                                  Icon = PackIconKind.Home,
                                  Tag = PageKeys.Start },

      new HamburgerMenuGlyphItem() { Label = Resources.ShellSettingsPage, 
                                     Glyph = "\uE8A5", 
                                     Tag = PageKeys.Settings },
  };

実行

こんな感じでうまく表示できました