Icons.Avalonia

A library to easily display icons in an Avalonia App.

NuGet

Name	Description	Version
Projektanker.Icons.Avalonia	Core library
Projektanker.Icons.Avalonia.FontAwesome	Font Awesome 6 Free
Projektanker.Icons.Avalonia.MaterialDesign	Material Design Icons

Icon providers

Name	Prefix	Example
FontAwesome 6	fa	fa-github
MaterialDesign	mdi	mdi-github

Usage

A full example is available in the Demo project.

1. Register icon providers on app start up

Register the icon provider(s) with the IconProvider.Current.

class Program
{
    // Initialization code. Don't use any Avalonia, third-party APIs or any
    // SynchronizationContext-reliant code before AppMain is called: things aren't initialized
    // yet and stuff might break.
    public static void Main(string[] args)
    {
        BuildAvaloniaApp()
            .StartWithClassicDesktopLifetime(args);
    }

    // Avalonia configuration, don't remove; also used by visual designer.
    public static AppBuilder BuildAvaloniaApp()
    {
        IconProvider.Current
            .Register<FontAwesomeIconProvider>()
            .Register<MaterialDesignIconProvider>();

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

2. Add xml namespace

Add xmlns:i="https://github.com/projektanker/icons.avalonia" to your view.

3. Use the icon

Standalone

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

Attached to ContentControl (e.g. Button)

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

Attached to MenuItem

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

Custom icon size

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

Animated

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

As an Image source

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

Done

Implement your own Icon Provider

Just implement the IIconProvider interface:

namespace Projektanker.Icons.Avalonia
{
    /// <summary>
    /// Represents an icon reader.
    /// </summary>
    public interface IIconReader
    {
        /// <summary>
        /// Gets the model of the requested icon.
        /// </summary>
        /// <param name="value">The value specifying the icon to return it's model from.</param>
        /// <returns>The model of the icon.</returns>
        /// <exception cref="System.Collections.Generic.KeyNotFoundException">
        /// The icon associated with the specified <paramref name="value"/> does not exists.
        /// </exception>
        IconModel GetIcon(string value);
    }

    /// <summary>
    /// Represents an icon provider.
    /// </summary>
    public interface IIconProvider : IIconReader
    {
        /// <summary>
        /// Gets the prefix of the <see cref="IIconProvider"/>.
        /// </summary>
        string Prefix { get; }
    }
}

and register it with the IIconProviderContainer:

IconProvider.Current.Register<MyCustomIconProvider>()

or

IIconProvider provider = new MyCustomIconProvider(/* custom ctor arguments */);
IconProvider.Current.Register(provider);

The IIconProvider.Prefix property has to be unique within all registered providers. It is used to select the right provider. E.g. FontAwesomeIconProvider's prefix is fa.