Include styles in App.xaml (for 2.0.0 version and higher):
<Application xmlns:materialIcons="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
...>
<Application.Styles>
...
<materialIcons:MaterialIconStyles />
</Application.Styles>
</Application>
Using
Add Material.Icons.Avalonia namespace to the root element of your file (your IDE can suggest it or do it automatically):
Import styles in Application (or if you use XAML check instructions for plain Avalonia)
type App() =
inherit Application()
override this.Initialize() =
..
this.Styles.Add(MaterialIconStyles(null))
..
Create bindings for MaterialIconnamespace Avalonia.FuncUI.DSL
[<AutoOpen>]
module MaterialIcon =
open Material.Icons
open Material.Icons.Avalonia
open Avalonia.FuncUI.Types
open Avalonia.FuncUI.Builder
let create (attrs: IAttr<MaterialIcon> list): IView<MaterialIcon> =
ViewBuilder.Create<MaterialIcon>(attrs)
type MaterialIcon with
static member kind<'t when 't :> MaterialIcon>(value: MaterialIconKind) : IAttr<'t> =
AttrBuilder<'t>.CreateProperty<MaterialIconKind>(MaterialIcon.KindProperty, value, ValueNone)
Icon types stored in Material.Icons.MaterialIconKind enum.
We can resolve an icon path by using Material.Icons.MaterialIconDataProvider.GetData().
Adding your own icons
Currently, there is no way to add your own icons, as icons are enum and cannot be modified.
But you can override some existing icons to use your own data:
public class CustomIconProvider : MaterialIconDataProvider
{
public override string ProvideData(MaterialIconKind kind)
{
return kind switch
{
MaterialIconKind.TrophyVariant => "some SVG code",
_ => base.ProvideData(kind)
};
}
}
// When your application starts (e.g. in the Main method) replace MaterialIconDataProvider with your own
public static int Main(string[] args)
{
MaterialIconDataProvider.Instance = new CustomIconProvider(); // Settings custom provider
// Application startup code
// return BuildAvaloniaApp().StartWithClassicDesktopLifetime(args);
}
FAQ
How to change icon color?
Change Foreground property.
How to change size?
If you are using MaterialIcon control - use Width or/and Height properties.
If you are using MaterialIconExt - use Size property.
How to update icons?
You can manually set Material.Icons package version in your project file.
What about versioning policy?
We use semver.
Any package with identical major and minor versions is compatible.
For example, 1.0.0 and 1.0.1 are compatible, but 1.0.0 and 1.1.0 might not be.
contains info about the icons
contains controls for AvaloniaUI
contains controls for WPF
