Flyout Item Icon: Displays "File: " in front of icon if a string or a glyph is passed

[licon4812]

when using a string or a glyph for a flyout item. File: is shown in front of the icon

using RandomNumberGenerator.Maui.Pages;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using MauiReactor;
using UraniumUI.Icons;

namespace RandomNumberGenerator.Maui
{
    internal class AppShell : Component
    {
        public override VisualNode Render()
            => new Shell
            {
            new FlyoutItem("Number Generator", UraniumUI.Icons.MaterialIcons.MaterialRegular.Casino)
            {
                new ShellContent()
                    .Title("Number Generator")
                    .RenderContent(()=>new NumberGeneratorPage())
            },
            new FlyoutItem("Decision Maker", UraniumUI.Icons.MaterialIcons.MaterialRegular.List_alt)
            {
                new ShellContent()
                    .Title("Decision Maker")
                    .RenderContent(()=>new DecisionMakerPage())
            }
            }
            .ItemTemplate(RenderItemTemplate);

        static VisualNode RenderItemTemplate(MauiControls.BaseShellItem item)
            => new Grid("68", "*")
            {
                new HStack()
                {
                    new Label(item.Icon)
                        .FontFamily("MaterialRegular")
                        .VCenter()
                        .Margin(10,0),
                    new Label(item.Title)
                        .VCenter()
                        .Margin(10,0)
                }
            };
    }
}

[adospace]

hum, looking at the UraniumUI documentation it seems you have to use an Image instead:

new Image()
    .Source(new MauiControls.FontImageSource
    {
        Glyph = MaterialRegular.Folder,
        FontFamily = "MaterialRegular",
        Color = Colors.Red
    }),

[licon4812]

@adospace

Even when I pass a string of "X" it does the same thing.

The icons work on pages themselves if I have them in Labels.

Just not the shell.

new HStack()
{
    new Label(choice).HStart().FontSize(24),
    new Button(UraniumUI.Icons.MaterialIcons.MaterialRegular.Delete)
        .FontSize(24)
        .FontFamily("MaterialRegular")
        .TextColor(Colors.Red)
        .Padding(0)
        .BorderWidth(0)
        .BackgroundColor(Colors.Transparent)
        .OnClicked(() =>
        {
            _choices.Remove(choice);
            SetState(s => s.Decision = "Result");
        })
}

[adospace]

ok, I see the problem, in the flyout template you're passing to the label text property the item.Icon value but that is of type ImageSource (it's not the glyph UraniumUI.Icons.MaterialIcons.MaterialRegular.Casino). This is why you see File:...

Instead try the following:

class AppShell : Component
{
    public override VisualNode Render()
        => new Shell
        {
            new FlyoutItem("Main Page")
            {
                new ShellContent()
                    .Title("Main Page")
                    .RenderContent(()=>new MainPage())
            }
            .FlyoutIcon(new MauiControls.FontImageSource
            {
                Glyph = MaterialRegular.Folder,
                FontFamily = "MaterialRegular",
                Color = Colors.Red
            })
            ,
        }
        .ItemTemplate(RenderItemTemplate);

    static VisualNode RenderItemTemplate(MauiControls.BaseShellItem item)
        => new Grid("68", "32, *")
        {
            new Image()
                .Source(item.FlyoutIcon),

            new Label(item.Title)
                .VCenter()
                .GridColumn(1)
        };
}

Of course, a c# extension of the FlyoutItem class here could help in cleaning the code:

class AppShell : Component
{
    public override VisualNode Render()
        => new Shell
        {
            new FlyoutItem("Main Page")
            {
                new ShellContent()
                    .Title("Main Page")
                    .RenderContent(()=>new MainPage())
            }
            .MaterialIcon(MaterialRegular.Folder)
            ,
        }
        .ItemTemplate(RenderItemTemplate);

    static VisualNode RenderItemTemplate(MauiControls.BaseShellItem item)
        => new Grid("68", "32, *")
        {
            new Image()
                .Source(item.FlyoutIcon),

            new Label(item.Title)
                .VCenter()
                .GridColumn(1)
        };
}

public static class FlyoutItemExtensions
{ 
    public static T MaterialIcon<T>(this T item, string icon) where T : FlyoutItem
    {
        item.FlyoutIcon(new MauiControls.FontImageSource
        {
            Glyph = icon,
            FontFamily = "MaterialRegular",
            Color = Colors.Red

        });

        return item;
    }
}

[licon4812]

That worked,

Thank you very much