Ionicons in .NET MAUI

In .NET Maui, we can easily use TTF.

Working with TTF in .NET Maui is a breeze. Just copy the True Type Font into the Fonts directory under Resources and add it to the project. It’s that simple.
Now, let’s harness the power of Ionicons‘ icons. It’s easier than you think.
To use a font in a .NET MAUI application, we need to register the font in the MauiProgram.cs.
Step 1
First, we download the font from the Ionicons: Premium Open Source Icon Pack for Ionic Framework page
Premium Open Source Icon Pack for Ionic Framework page . After the download, we copy the font to Resources/Fonts.

Step 2
We have to register the font, and we have to do that in the MauiProgramm.cs

.ConfigureFonts(fonts =>
 {
     fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
     fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
//We add our new Font here
     fonts.AddFont("ionicons.ttf", "Ionicons");
 });

You can find out more about fonts in .NET MAUI here
Fonts in .NET MAUI – .NET MAUI | Microsoft Learn

Now, for example, we can make an ImageButton with the Ionicons font via FontImageSource.
FontImageSource turns a font symbol into a PNG and makes it available as an ImageSource.

This is a straightforward way for Images, ImageButton, etc. to display icons from a font.

However, there is one limitation: only Unicode codes can be entered as symbols.

At Ionicons there is an overview under https://ionic.io/ionicons/v2/cheatsheet.html.

With the following program we can parse the page and have a resource directory created.

WebClient client = new WebClient();
String downloadedString = client.DownloadString("https://ionic.io/ionicons/v2/cheatsheet.html");

Console.WriteLine(downloadedString);
string pattern = @"<i\s+class=""icon\s+(ion-[^""]+)""[^>]*></i>[\s\S]*?<input\s+class=""html""[^>]*\svalue=""([^""]+)""[^>]*>";

Regex regex = new Regex(pattern, RegexOptions.IgnoreCase);
MatchCollection matches = regex.Matches(downloadedString);

List<(string IconClass, string HtmlValue)> extractedValues = new List<(string IconClass, string HtmlValue)>();
foreach (Match match in matches)
{
    string iconClass = match.Groups[1].Value;
    string htmlValue = match.Groups[2].Value;
    extractedValues.Add((iconClass, htmlValue));
}

Console.WriteLine("Extracted values:");
string filePath = "ionicons.xaml";
using (StreamWriter writer = new StreamWriter(filePath))
{
    writer.WriteLine("<?xml version=\"1.0\" encoding=\"UTF-8\" ?>");
    writer.WriteLine("<?xaml-comp compile=\"true\" ?>");
    writer.WriteLine("<ResourceDictionary \r\n    xmlns=\"http://schemas.microsoft.com/dotnet/2021/maui\"\r\n    xmlns:x=\"http://schemas.microsoft.com/winfx/2009/xaml\">\r\n");
    foreach (var value in extractedValues)
    {
        writer.WriteLine($"<x:String x:Key=\"{value.IconClass.Replace("-","_")}\">{value.HtmlValue.Replace("&","&")}\"</x:String>");
    }

    writer.WriteLine("</ResourceDictionary>");
}
 
Console.ReadLine();

We add this file to our project in Resources Styles

Now all we have to do is add the Resource Directory to the App.xaml file

<Application.Resources>

     <ResourceDictionary>

         <ResourceDictionary.MergedDictionaries>

             <ResourceDictionary Source="Resources/Styles/Colors.xaml" />

             <ResourceDictionary Source="Resources/Styles/Styles.xaml" />

             <ResourceDictionary Source="Resources/Styles/ionicons.xaml" />

         </ResourceDictionary.MergedDictionaries>

     </ResourceDictionary>

 </Application.Resources>

And then we can easily use the icons.

<ImageButton BackgroundColor="#D1D1D1" Source="{FontImage {StaticResource ion_alert}, FontFamily=Ionicons, Size=44}" />

Adding new fonts and icons in .NET MAUI is easy

Source Code gpiwonka/ionicons: Ionicons in .NET MAUI (github.com)

Ionicons in .NET MAUI

Kommentare

Schreibe einen Kommentar Antworten abbrechen