How to use own icons or different icon pack with navigation?

[marco-wirth]

I'm wondering if there is a way to use different icons for the navigation than the Fluent UI System Icons?
I can't figure out on how to realize this. If someone knows a way a short code example would be great!

Thx in advance

[Koichi-Kobayashi]

@marco-wirth
This allows you to use SymbolIcon and FluentIcons.Common.

Xaml

        <ui:NavigationView
            MenuItemsSource="{Binding ViewModel.MenuItems, Mode=OneWay}"
            ...
        </ui:NavigationView

ViewModels

    private void InitializeMenuStructure()
    {
        MenuItems.Clear();

        // ホームアイテム
        _homeMenuItem = new NavigationViewItem()
        {
            Content = LocalizationHelper.GetString("Home", "ホーム"),
            Icon = new SymbolIcon { Symbol = SymbolRegular.Home24 },
            Tag = "HOME"
        };
        _homeMenuItem.Click += (s, e) => NavigateToHome();
        MenuItems.Add(_homeMenuItem);

        // ピン留めグループ（展開可能）
        _pinnedGroup = new NavigationViewItem()
        {
            Content = LocalizationHelper.GetString("Pinned", "ピン留め"),
            Icon = new SymbolIcon { Symbol = SymbolRegular.Pin24 },
            Tag = "PINNED_GROUP",
            IsExpanded = true // デフォルトで展開
        };
        MenuItems.Add(_pinnedGroup);

        // ピン留めされたフォルダーを追加
        AddPinnedFolders();

        // ドライブグループ（展開可能）
        _drivesGroup = new NavigationViewItem()
        {
            Content = LocalizationHelper.GetString("Drives", "ドライブ"),
            Icon = new FluentIconElement
            {
                Icon = FluentIcons.Common.Icon.HardDrive,
                IconVariant = IconVariant.Regular,
                FontSize = 20
            },
            Tag = "DRIVES_GROUP",
            IsExpanded = true // デフォルトで展開
        };
        MenuItems.Add(_drivesGroup);

        // ドライブは後で読み込む（プレースホルダーを追加）
        var drivesPlaceholder = new NavigationViewItem()
        {
            Content = LocalizationHelper.GetString("Loading", "読み込み中..."),
            IsEnabled = false,
            Tag = "DRIVES_PLACEHOLDER"
        };
        _drivesGroup.MenuItems.Add(drivesPlaceholder);

        // タググループ（展開可能）
        // NOTE: Tag を string にすると MainWindow 側の ItemInvoked ロジックに拾われる可能性があるため、Tag は null にしておく
        _tagsGroup = new NavigationViewItem()
        {
            Content = LocalizationHelper.GetString("Tags", "タグ"),
            Icon = new FluentIconElement
            {
                Icon = FluentIcons.Common.Icon.Tag,
                IconVariant = IconVariant.Regular,
                FontSize = 20
            },
            Tag = null,
            IsExpanded = true
        };
        MenuItems.Add(_tagsGroup);

        // タグは後で読み込む（プレースホルダーを追加）
        var tagsPlaceholder = new NavigationViewItem()
        {
            Content = LocalizationHelper.GetString("Loading", "読み込み中..."),
            IsEnabled = false,
            Tag = "TAGS_PLACEHOLDER"
        };
        _tagsGroup.MenuItems.Add(tagsPlaceholder);

        // クラウドドライブグループ（展開可能）
        _cloudDrivesGroup = new NavigationViewItem()
        {
            Content = LocalizationHelper.GetString("CloudDrives", "クラウドドライブ"),
            Icon = new SymbolIcon { Symbol = SymbolRegular.Cloud24 },
            Tag = "CLOUD_DRIVES_GROUP",
            IsExpanded = true // デフォルトで展開
        };
        MenuItems.Add(_cloudDrivesGroup);

        // クラウドドライブは後で読み込む（プレースホルダーを追加）
        var cloudDrivesPlaceholder = new NavigationViewItem()
        {
            Content = LocalizationHelper.GetString("Loading", "読み込み中..."),
            IsEnabled = false,
            Tag = "CLOUD_DRIVES_PLACEHOLDER"
        };
        _cloudDrivesGroup.MenuItems.Add(cloudDrivesPlaceholder);

        // ネットワークアイテム
        var networkItem = new NavigationViewItem()
        {
            Content = LocalizationHelper.GetString("Network", "ネットワーク"),
            Icon = new SymbolIcon { Symbol = SymbolRegular.Globe24 },
            Tag = "NETWORK"
        };
        networkItem.Click += (s, e) => NavigateToPathInActivePane("shell:NetworkPlacesFolder");
        MenuItems.Add(networkItem);
    }