Optris.Icons.Avalonia

Optris.Icons.Avalonia

Optris-maintained fork. The original Projektanker.Icons.Avalonia is unmaintained — Projektanker GmbH has been dissolved and PRs to the upstream repo will not be reviewed. Optris GmbH has adopted this project to keep it alive for the Avalonia community, starting with an Avalonia 12 port.

Published to NuGet as Optris.Icons.Avalonia, Optris.Icons.Avalonia.FontAwesome, and Optris.Icons.Avalonia.MaterialDesign. The C# namespace has been renamed from Projektanker.Icons.Avalonia to Optris.Icons.Avalonia (the Projektanker name was misleading post-dissolution). The XAML XML namespace URL https://github.com/projektanker/icons.avalonia is preserved as an opaque identifier so existing consumer XAML keeps working without changes.

A library to easily display icons in an Avalonia App.

Live Demo — try it in your browser

NuGet

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

Installation

dotnet add package Optris.Icons.Avalonia
dotnet add package Optris.Icons.Avalonia.FontAwesome
dotnet add package Optris.Icons.Avalonia.FontAwesome7
dotnet add package Optris.Icons.Avalonia.MaterialDesign

Install the core package and at least one icon provider. You only need the packs you plan to use. Font Awesome 6 and 7 can be used side-by-side.

Icon providers

Quick start

A full example is available in the Demo project (live). For a detailed walkthrough, see the Getting Started guide.

1. Register icon providers on app start up

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

using Avalonia;
using Optris.Icons.Avalonia;
using Optris.Icons.Avalonia.FontAwesome;
using Optris.Icons.Avalonia.FontAwesome7;
using Optris.Icons.Avalonia.MaterialDesign;

namespace Demo.Desktop;

internal static class Program
{
    public static void Main(string[] args)
    {
        BuildAvaloniaApp()
            .StartWithClassicDesktopLifetime(args);
    }

    public static AppBuilder BuildAvaloniaApp()
    {
        IconProvider.Current
            .Register<FontAwesomeIconProvider>()
            .Register<FontAwesome7IconProvider>()
            .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-solid fa-anchor" />

Attached to ContentControl (e.g. Button)

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

Attached to MenuItem

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

Custom icon size

<i:Icon Value="fa-solid 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-solid fa-anchor" Brush="(defaults to black)" />
  </Image.Source>
</Image>

Done

Implement your own Icon Provider

Just implement the IIconProvider interface:

namespace Optris.Icons.Avalonia;

public interface IIconReader
{
    IconModel GetIcon(string value);
}

public interface IIconProvider : IIconReader
{
    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.

For a complete guide, see Custom Providers.

Documentation

Browse the full documentation on the Wiki, or jump to a specific page:

• Getting Started — installation, setup, first icon
• Usage Guide — controls, attached properties, animations, styling, data binding
• Icon Packs — Font Awesome & Material Design reference, browse icons
• Custom Providers — implement your own icon source
• API Reference — classes, interfaces, and model types
• Troubleshooting — common errors and fixes

Contributing

See CONTRIBUTING.md for development setup, building, testing, and release process.

License

MIT