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 Free
Projektanker.Icons.Avalonia.MaterialDesign	Material Design Icons

Icon providers

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

Usage

A full example is available in the demo directory.

1. Register icon providers on app start up

Register the icon provider(s) within the Main method before building the Avalonia app. Otherwise the visual designer won't be able to use the registered icon provider(s).

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()
    {
        return AppBuilder.Configure<App>()
            .UsePlatformDetect()
            .LogToTrace()
            .WithIcons(container => container
                .Register<FontAwesomeIconProvider>()
                .Register<MaterialDesignIconProvider>());
    }
}

2. Add xml namespace

Add xmlns:i="clr-namespace:Projektanker.Icons.Avalonia;assembly=Projektanker.Icons.Avalonia" to your view.

3. Use the icon

Standalone

<i:Icon Value="fab fa-github" />

Attached to ContentControl (e.g. Button)

<Button i:Attached.Icon="fab fa-github" />

Attached to MenuItem

<Style Selector="MenuItem i|Icon">
    <Setter Property="FontSize" Value="{StaticResource FontSizeNormal}" />
    <Setter Property="Margin" Value="0" />
</Style>

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

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 SVG path of the requested icon.
        /// </summary>
        /// <param name="value">The value specifying the icon to return it's path from.</param>
        /// <returns>The path of the icon.</returns>
        /// <exception cref="System.Collections.Generic.KeyNotFoundException">
        /// The icon associated with the specified <paramref name="value"/> does not exists.
        /// </exception>
        string GetIconPath(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:

container.Register<MyCustomIconProvider>()

or

IIconProvider provider = new MyCustomIconProvider(/* custom ctor arguments */);
container.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.