Shell FlyoutItem icon from Font Awesome

Question

I am trying to use FontAwesome icons in FlyoutItem as an icon using FontImageSource. I had success in Xamarin Forms with following setup, but for some reason in NET MAUI it does not work (at least on Windows?)? I am seeing tab item, but there is no icon no matter what I try. Is there some way to use Font Awesome icons instead of png pictures?

Example of icon I am trying to use: https://fontawesome.com/icons/user?s=solid&f=classic

MauiProgram.cs:

var builder = MauiApp.CreateBuilder();
builder
  .UseSkiaSharp(true)
  .UseMauiApp<App>()
  .ConfigureFonts(fonts =>
  {
    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
    fonts.AddFont("FW-Regular-400.otf", "FontAwesomeRegular");
    fonts.AddFont("FWBrands-Regular-400.otf", "FontAwesomeBrands");
    fonts.AddFont("FW-Solid-900.otf", "FontAwesomeSolid");
  });

App.xaml:

  <!-- Desktop/Tablet-->
  <FlyoutItem Title="Home">
    <ShellContent ContentTemplate="{DataTemplate page:HomePage}">
      <ShellContent.Icon>
        <FontImageSource FontFamily="FontAwesomeSolid" Glyph="&#xf021;"/>
      </ShellContent.Icon>
    </ShellContent>
  </FlyoutItem>
  <FlyoutItem Title="Settings">
    <ShellContent ContentTemplate="{DataTemplate page:SettingsPage}">
      <ShellContent.Icon>
        <FontImageSource FontFamily="FontAwesomeSolid" Glyph="user"/>
      </ShellContent.Icon>
    </ShellContent>
  </FlyoutItem>

Did you set the build action to `MauiFont`? That's usually the mistake people make — FreakyAli, Jan 02 '23 at 05:27
@FreakyAli build action is set to MauiFont. Also icons are working in application for buttons labels and etc, but for some reason not for FlyoutItems in App.xaml — 10101, Jan 02 '23 at 09:30

10101 · Accepted Answer · 2023-01-13T22:50:36.340

I have got it working way mentioned below. However currently it seems that this solution is working in NET7, but not in NET6. In NET6 there are no icons visible:

For NET 7

App.xaml:

<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MyTool"
             xmlns:page="clr-namespace:MyTool.Pages"
             xmlns:helpers="clr-namespace:MyTool.Helpers"
             x:Class="MyTool.App">

  <Application.MainPage>
    <Shell FlyoutWidth="90" FlyoutBehavior="{OnIdiom Phone=Disabled, Default=Locked}">

      <!-- Desktop/Tablet-->
      <FlyoutItem Title="Home" Icon="{FontImage FontFamily=FontAwesomeSolid, Glyph={x:Static helpers:FontAwesomeIcons.House}, Size=50}">
        <ShellContent ContentTemplate="{DataTemplate page:HomePage}">
          <ShellContent.Icon>
            <FontImageSource FontFamily="FontAwesomeSolid" Glyph="{x:Static helpers:FontAwesomeIcons.House}" Color="White" Size="50"/>
          </ShellContent.Icon>
        </ShellContent>
      </FlyoutItem>
      <FlyoutItem Title="Settings" Icon="{FontImage FontFamily=FontAwesomeSolid, Glyph={x:Static helpers:FontAwesomeIcons.Gear}, Size=50}">
        <ShellContent ContentTemplate="{DataTemplate page:SettingsPage}">
          <ShellContent.Icon>
            <FontImageSource FontFamily="FontAwesomeSolid" Glyph="{x:Static helpers:FontAwesomeIcons.Gear}" Color="White" Size="50"/>
          </ShellContent.Icon>
        </ShellContent>
      </FlyoutItem>
    </Shell>
  </Application.MainPage>
</Application>

FontAwesomeIcons.cs: (use some tool available in Internet for such a class generation)

namespace MyTool.Helpers
{
    public static class FontAwesomeIcons
    {
      public const string Space = "\u0020";
      public const string Exclamation = "\u0021";
      public const string Hashtag = "\u0023";
      public const string DollarSign = "\u0024";
      public const string Percent = "\u0025";
      public const string Asterisk = "\u002a";
      public const string Plus = "\u002b";
      public const string Hyphen = "\u002d";

      // etc
    }
 }

MauiProgram.cs:

namespace MyTool;

public static class MauiProgram
{
  public static MauiApp CreateMauiApp()
  {
    var builder = MauiApp.CreateBuilder();
    builder
      .UseMauiApp<App>()
      .ConfigureFonts(fonts =>
      {
        fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
        fonts.AddFont("FW-Solid-900.otf", "FontAwesomeSolid");
      });

#if DEBUG
    builder.Logging.AddDebug();
#endif

    return builder.Build();
  }
}

It is a valid solution. It works and is a common approach. No need for optimization here. It's actually my preferred way, too. That way, you have all the glyphs defined in one place. — Julian, Jan 02 '23 at 11:58
@ewerspej does this work for you in NET6 as well? For me this solution works in NET7, but not in NET6. In NET6 there are no icons or texts visible. — 10101, Jan 03 '23 at 22:23
Not sure, I switched early to .NET 7.0. Do you need to stick with .NET 6.0 for any particular reason? — Julian, Jan 04 '23 at 06:44
@ewerspej I see there are might be some bugs in NET7 as well with NET MAUI. Are you able to change Shell bar background? FlyoutBackground="#111111" I might ask a new question here — 10101, Jan 04 '23 at 14:01
Not sure what you mean, but a separate question would indeed be appropriate if it's not directly related to your other issue here — Julian, Jan 04 '23 at 19:41
@ewerspej I have created new question. Maybe you can share some ideas if you have more experience with NET MAUI. Would appreciate. https://stackoverflow.com/questions/75006669/change-colour-of-icon-and-text-if-selected-in-sidebar — 10101, Jan 04 '23 at 21:05

score 1 · Answer 2 · answered Jan 14 '23 at 09:13

To be added as an answer to Shell FlyoutItem icon from Font Awesome

Here's one that works for me. The difference to @10101's answer, and to the one I had above that didn't work is the definition of a static FontIcon resource.
Tested on Net6 and Net7 (VS2022 17.4.4).

It is based on @10101's answer combined with an idea here.

Steps

Added a FontIcon resource.
Set the Icon property on the FlyoutItem (as opposed to the underlying ShellContent).

Limitation: the size and color are set on the FontImage resource in the resource definition, not where it is used in FlyoutItem definition. I don't know how to override those properties on the FlyoutItem.

Code
Font registration in MauiProgram.cs (abbreviated):

public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                [...]
                // Custom fonts
                fonts.AddFont("bootstrap-icons.ttf", "Bootstrap");
            });

            [...]
            return builder.Build();
        }

FontIcon created as a resource in styles.xaml (I actually created another resource definition file called fonticons.xaml and added to the merged resource dictionary in App.xaml, but this is not important in this case):

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <x:String x:Key="BootStrapGear">&#xf3e5;</x:String>

    <FontImage x:Key="IconGear"
        FontFamily="Bootstrap"
        Color="Black"
        Size="50"
        Glyph="{x:StaticResource BootStrapGear}"/>
</ResourceDictionary>

AppShell.xaml:

<Shell
    x:Class="MyApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    [...]
    Shell.FlyoutBehavior="Flyout">
 
    [...]
    <FlyoutItem Title="Settings" Icon="{x:StaticResource IconGear}">
        <ShellContent
            ContentTemplate="{DataTemplate localconfigns:ConfigPage}"
            Route="ConfigPage" />
    </FlyoutItem>
</Shell>

Shell FlyoutItem icon from Font Awesome

2 Answers2