Label font doesn't apply when using TemplateBinding in maui

Question

I'm learning MAUI and this binding stuff is pretty tricky still...

I have a XAML like this:

<ScrollView Grid.Row="1"
            Orientation="Horizontal"
            HorizontalOptions="FillAndExpand"
            HorizontalScrollBarVisibility="Default"
            VerticalOptions="Center">
    <HorizontalStackLayout RadioButtonGroup.GroupName="MenuCategories"
                           x:Name="foodTypeStack"
                           VerticalOptions="Start"
                           Spacing="3">
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <RadioButton Content="{Binding .}">
                    <RadioButton.ControlTemplate>
                        <ControlTemplate>
                            <Grid>

                                <Border x:Name="dishTypeContainer"
                                        MinimumWidthRequest="80"
                                        MaximumHeightRequest="140"
                                        Padding="8,0,8,0"
                                        Stroke="Transparent">
                                    <Border.StrokeShape>
                                        <RoundRectangle CornerRadius="20,20,20,20" />
                                    </Border.StrokeShape>

                                    <Label x:Name="dishTypeTextLabel"
                                           HorizontalOptions="Center"
                                           Text="{TemplateBinding Content.Name}"
                                           FontFamily="Icons"
                                           VerticalOptions="Center" />
                                </Border>

                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroupList>
                                        <VisualStateGroup x:Name="CheckedStates">
                                            <VisualState x:Name="Checked">
                                                <VisualState.Setters>
                                                    <Setter TargetName="dishTypeTextLabel"
                                                            Property="Label.TextColor"
                                                            Value="WhiteSmoke" />
                                                    <Setter TargetName="dishTypeContainer"
                                                            Property="Border.BackgroundColor"
                                                            Value="{StaticResource DarkSeaBlue}" />
                                                </VisualState.Setters>
                                            </VisualState>
                                            <VisualState x:Name="Unchecked">
                                                <VisualState.Setters>
                                                    <Setter TargetName="dishTypeTextLabel"
                                                            Property="Label.TextColor"
                                                            Value="{StaticResource LightGray}" />
                                                    <Setter TargetName="dishTypeContainer"
                                                            Property="Border.BackgroundColor"
                                                            Value="WhiteSmoke" />
                                                </VisualState.Setters>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateGroupList>
                                </VisualStateManager.VisualStateGroups>
                            </Grid>
                        </ControlTemplate>
                    </RadioButton.ControlTemplate>
                </RadioButton>
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </HorizontalStackLayout>
</ScrollView>

In the .cs file i have this type of binding:

protected override async void OnAppearing()
{
    base.OnAppearing();
    var foodTypes = await menuDatabase.GetFoodTypeListAsync();
    BindableLayout.SetItemsSource(foodTypeStack, foodTypes);
}

The Icons font for the label used on the RadioButtonTemplate is a Fontello font.

The problem is that the font in that label doesn't apply. It worked before I started using the Binding expression.

MauiProgram.cs file:

public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    builder
        .UseMauiApp<App>()
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            fonts.AddFont("Fontello.ttf", "Icons");
            fonts.AddFont("Rubik-Light.ttf", "RubikLight");
            fonts.AddFont("Rubik-Regular.ttf", "RubikRegular");
        });

    builder.Services.AddSingleton<MauiAppTestDatabase>();

#if DEBUG
    builder.Logging.AddDebug();
#endif
    return builder.Build();
}

This is one of the strings that use on the label:

 Drink

Answer 1

When you define the font icon string in C#, you need to use the following unicode notation:

public string MyIcon { get; } = "\ue801";

This should be the equivalent of writing  in XAML.

With this, you should be able to see the font icon instead of the string when using it in a binding expression.

You can check the C# unicode notation for each icon here by uploading the font: https://andreinitescu.github.io/IconFont2Code/

Note that  Drink is not a valid value for a label using an icon font, because the Drink part is not found in the font. Depending on the platform, it may still be shown, but it's not guaranteed. If you need to display an icon and text, you should work with two separate labels each with a different FontFamily set - one for the icon and one for the text.