Improving Avalonia UI Quality, Cross-Platform Icon Library Selection Practice

Preface

Previously, I updated the StarBlog publishing tool with a version upgrade and optimized the interface, which included replacing emoji with FontAwesome icons.

If emoji are only used on a single system (like Windows), there might not be any issues.

However, when switching between multiple devices, I found that the rendering on macOS wasn't ideal—some emoji displayed differently than on Windows.

Now, with all icons switched to Font Awesome, the appearance is much more consistent and aesthetically pleasing. It feels like the process of changing icons could be a topic for a separate article.

The Avalonia ecosystem offers a variety of icon libraries to choose from, and this article primarily introduces two of them:

• Icon.Avalonia
• IconPacks.Avalonia

Icon.Avalonia

https://github.com/Projektanker/Icons.Avalonia

This library supports two types of icons and currently has 365 stars.

• Projektanker.Icons.Avalonia.FontAwesome
• Projektanker.Icons.Avalonia.MaterialDesign

I use this library in the StarBlog Publisher tool, and it's quite simple to use.

Installation

Using FontAwesome as an example, first add the dependency

dotnet add package Projektanker.Icons.Avalonia.FontAwesome

Register in the Program.BuildAvaloniaApp method

public static AppBuilder BuildAvaloniaApp() {
  IconProvider.Current
    .Register<FontAwesomeIconProvider>();

  return AppBuilder.Configure<App>()
    .UsePlatformDetect()
    .LogToTrace();
}

Add the namespace in the layout file

xmlns:i="https://github.com/projektanker/icons.avalonia"

Usage

Then you can use the icons.

Standalone usage

<i:Icon Value="fa-brands fa-anchor" />

Display a single icon.

Attached to ContentControl (e.g., a Button)

<Button i:Attached.Icon="fa-brands fa-anchor" />

Attach the icon to controls like buttons.

Attached to MenuItem

<MenuItem Header="About" i:MenuItem.Icon="fa-solid fa-circle-info" />

Add an icon to menu items, e.g., the "About" menu.

Custom icon size

<i:Icon Value="fa-brands fa-anchor" FontSize="24" />

Set the icon font size to 24.

Animated

<i:Icon Value="fa-spinner" Animation="Pulse" />
<i:Icon Value="fa-sync" Animation="Spin" />

Add animation to icons:

• Pulse: a pulsing effect

• Spin: a spinning effect

As an Image source

<Image>
  <Image.Source>
    <i:IconImage Value="fa-brands fa-anchor" Brush="(default is black)" />
  </Image.Source>
</Image>

Display the icon as an image. The color can be set via Brush (default is black).

IconPacks.Avalonia

https://github.com/MahApps/IconPacks.Avalonia

This library supports a vast number of icons, though it's a bit surprising that it only has 62 stars.

It supports all of the following icons... 😂, which is incredibly comprehensive!

• BootstrapIcons
• BoxIcons
• CircumIcons
• Codicons
• Coolicons
• Entypo
• EvaIcons
• FeatherIcons
• FileIcons
• Fontaudio
• FontAwesome
• Fontisto
• ForkAwesome
• GameIcons
• Ionicons
• JamIcons
• Lucide
• Material
• MaterialLight
• MaterialDesign
• MemoryIcons
• Microns
• Modern
• Octicons
• PhosphorIcons
• PicolIcons
• PixelartIcons
• RadixIcons
• RemixIcon
• RPGAwesome
• SimpleIcons
• Typicons
• Unicons
• VaadinIcons
• WeatherIcons
• Zondicons

Installation

Here we'll use FontAwesome as an example

dotnet add package IconPacks.Avalonia.FontAwesome

Add the namespace

xmlns:iconPacks="https://github.com/MahApps/IconPacks.Avalonia"

Register it in the Application styles

<Application.Styles>
  <FluentTheme />

  <StyleInclude Source="avares://IconPacks.Avalonia/Icons.axaml" />
  <StyleInclude Source="avares://IconPacks.Avalonia.FontAwesome/Icons.axaml" />
</Application.Styles>

PackIcon Control

The PackIcon control is the primary method for using icons from icon packs.

Each icon pack has its own control, following this naming format:

PackIcon<PackName>

For example, using icons from FontAwesome:

<iconPacks:PackIconFontAwesome Kind="SolidAnchor"
                               Width="24"
                               Height="24" />

Or:

<iconPacks:PackIconFontAwesome Kind="BrandsGithub"
                               Width="24"
                               Height="24" />

Generic Control PackIconControl

PackIconControl is a generic control that can be used to display icons from any icon pack.

Only available in the main package IconPacks.Avalonia.

<iconPacks:PackIconControl Kind="{x:Static iconPacks:PackIconFontAwesomeKind.SolidAnchor}"
                           Width="24"
                           Height="24" />

PackIcon Markup Extension

A more concise approach is to use the PackIcon markup extension to set the content of a ContentControl.

For example, you can add a FontAwesome icon inside a Button:

<Button Content="{iconPacks:FontAwesome SolidAnchor}" />

Or use the parameterized form:

<Button Content="{iconPacks:FontAwesome Kind=SolidAnchor}" />

You can also set the size:

<Button Content="{iconPacks:FontAwesome SolidAnchor, Width=32, Height=32}" />

If you are using the main package, you can also use the generic syntax:

<Button Content="{iconPacks:PackIcon {x:Static iconPacks:PackIconFontAwesomeKind.SolidAnchor}, Width=32, Height=32}" />

PackIcon Image MarkupExtensions

Icons can also be used as images:

<Image Source="{iconPacks:FontAwesomeImage Kind=SolidAnchor, Brush=DarkBlue}"
       Width="24" Height="24"
       HorizontalAlignment="Left" Margin="10" />

Alternatively, a generic syntax can be used (available in the main package):

<Image Source="{iconPacks:PackIconImage Kind={x:Static iconPacks:PackIconFontAwesomeKind.SolidAnchor}, Brush=DarkOrange}"
       Width="24" Height="24"
       HorizontalAlignment="Left" Margin="10" />

PackIcon Image Converter

You can also use an icon converter to transform bound data into an icon image:

<Image Source="{Binding #FontAwesomeKindComboBox.SelectedItem, Mode=OneWay, Converter={iconPacks:PackIconFontAwesomeKindToImageConverter Brush=Crimson}}"
       Width="24" Height="24"
       HorizontalAlignment="Left" Margin="10" />

A universal converter is also available in the main package:

<Image Source="{Binding #FontAwesomeKindComboBox.SelectedItem, Mode=OneWay, Converter={iconPacks:PackIconKindToImageConverter Brush=Crimson}}"
       Width="24" Height="24"
       HorizontalAlignment="Left" Margin="10" />

For more details on the icon types supported by FontAwesome (Solid, Regular, Brands, etc.), you can check the PackIconFontAwesomeKind enumeration or view all available icon names in the IDE's code completion.

Icon Browser Tool

https://github.com/MahApps/IconPacks.Browser

This IconPacks also includes an icon browser, which makes it very convenient to search for icons and copy code.

It is indeed very comprehensive~

However, what I didn't expect is that the icon browser has more Stars (170+) than the icon pack itself (60+)... 😂