Unable to resolve type Material about mahapps.metro.iconpacks

[timunie]

@artoriazz MahApps.Metro.IconPacks is not able to support Avalonia yet. It's planned for the future, but I have no due date for you.

[timunie]

Yeah, you can for example open the Icon.Browser and copy the Path-Data. This can be used for Path or PathIcon (avalonia v11.0 preview versions only). The Path-Data can also be added to Resources using like this:

<!-- in any Resources node: --> 
<PathGeometry x:Key="MaterialLight.PresentationPlay">
    M 2,4L 10,4C 10,3.44772 10.4477,3 11,3L 12,3C 12.5523,3 13,3.44772 13,4L 21,4L 21,5L 20,5L 20,16L 14.2679,16L 15.8756,22L 14.8404,22L 13.2327,16L 9.76733,16L 8.15963,22L 7.12436,22L 8.73205,16L 3,16L 3,5L 2,5L 2,4 Z M 19,15L 19,5.00001L 4,5.00001L 4,15L 19,15 Z M 10,7L 11,7L 14,10L 11,13L 10,13L 10,7 Z M 11,8.41422L 11,11.5858L 12.5858,10L 11,8.41422 Z
</PathGeometry>

<!-- usage -->
<Path Data="{DynamicResource MaterialLight.PresentationPlay}" Width="40" Height="40" />

[jotalanusse]

Support for Avalonia would be great! Is there any workaround that could be done in the meantime to use the icons in Avalonia?

[jotalanusse]

Okay so last night I came up with a “temporal” (IDK when Avalonia will be supported) solution to this problem:

public class MahAppsIconControl : TemplatedControl
{
    public static readonly StyledProperty<Enum> IconKindProperty =
        AvaloniaProperty.Register<MahAppsIconControl, Enum>(
            nameof(IconKind));

    public Enum IconKind
    {
        get => GetValue(IconKindProperty);
        set => SetValue(IconKindProperty, value);
    }

    public static readonly DirectProperty<MahAppsIconControl, Geometry> IconGeometryProperty =
        AvaloniaProperty.RegisterDirect<MahAppsIconControl, Geometry>(
            nameof(IconGeometry), o =>
            {
                Enum iconKind = o.GetValue(IconKindProperty);

                string? path = PackIconControlDataFactory.DataIndex.Value
                    .Where(x => x.Key.Equals(iconKind))
                    .Select(x => x.Value)
                    .FirstOrDefault();

                Geometry geometry = Geometry.Parse(path ?? string.Empty);

                return geometry;
            });

    private Geometry iconGeometry;
    public Geometry IconGeometry
    {
        get { return iconGeometry; }
        private set { SetAndRaise(IconGeometryProperty, ref iconGeometry, value); }
    }
}

And the axaml:

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:controls="using:ProjectName.Controls">
    <Design.PreviewWith>
        <controls:MahAppsIconControl />
    </Design.PreviewWith>

    <Style Selector="controls|MahAppsIconControl">
        <!-- Set Defaults -->
        <Setter Property="Foreground" Value="White"/>
        
        <Setter Property="Template">
            <ControlTemplate>
                <Image>
                    <Image.Source>
                        <DrawingImage>
                            <DrawingImage.Drawing>
                                <GeometryDrawing
                                    Brush="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}"
                                    Geometry="{Binding IconGeometry, RelativeSource={RelativeSource TemplatedParent}}"/>
                            </DrawingImage.Drawing>
                        </DrawingImage>
                    </Image.Source>
                </Image>
            </ControlTemplate>
        </Setter>
    </Style>
</Styles>

Usage:

<controls:MahAppsIconControl Foreground="Blue" IconKind="{x:Static iconPacks:PackIconBoxIconsKind.RegularGhost}" Height="100" Width="100"/>

It works pretty good, but with some exceptions. One of them being that all the icons from the BoxIcons library are flipped vertically for example, I don't know why. I checked the source code and the icon paths seem to be flipped vertically for some reason.

EDIT: Added null-coalescing, spelling.