Merge branch 'feature/icon-picker' into development

src/Artemis.UI.Shared/Controls/Flyouts/MaterialIconPickerFlyout.cs

@@ -0,0 +1,38 @@
+using Avalonia.Controls;
+using FluentAvalonia.UI.Controls;
+
+namespace Artemis.UI.Shared.Flyouts;
+
+/// <summary>
+///     Defines a flyout that hosts a data model picker.
+/// </summary>
+public sealed class MaterialIconPickerFlyout : Flyout
+{
+    private MaterialIconPicker.MaterialIconPicker? _picker;
+
+    /// <summary>
+    ///     Gets the data model picker that the flyout hosts.
+    /// </summary>
+    public MaterialIconPicker.MaterialIconPicker MaterialIconPicker => _picker ??= new MaterialIconPicker.MaterialIconPicker();
+    
+    /// <inheritdoc />
+    protected override Control CreatePresenter()
+    {
+        _picker ??= new MaterialIconPicker.MaterialIconPicker();
+        _picker.Flyout = this;
+        FlyoutPresenter presenter = new() {Content = MaterialIconPicker};
+        return presenter;
+    }
+
+    #region Overrides of FlyoutBase
+
+    /// <inheritdoc />
+    protected override void OnClosed()
+    {
+        if (_picker != null)
+            _picker.Flyout = null;
+        base.OnClosed();
+    }
+
+    #endregion
+}

src/Artemis.UI.Shared/Controls/MaterialIconPicker/MaterialIconPicker.cs

@@ -0,0 +1,147 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Linq;
+using System.Reactive.Linq;
+using System.Text.RegularExpressions;
+using System.Windows.Input;
+using Artemis.UI.Shared.Flyouts;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Data;
+using Avalonia.LogicalTree;
+using DynamicData;
+using DynamicData.Binding;
+using Material.Icons;
+using ReactiveUI;
+
+namespace Artemis.UI.Shared.MaterialIconPicker;
+
+/// <summary>
+///     Represents a Material icon picker picker that can be used to search and select a Material icon.
+/// </summary>
+public partial class MaterialIconPicker : TemplatedControl
+{
+    /// <summary>
+    ///     Gets or sets the current Material icon.
+    /// </summary>
+    public static readonly StyledProperty<MaterialIconKind?> ValueProperty =
+        AvaloniaProperty.Register<MaterialIconPicker, MaterialIconKind?>(nameof(Value), defaultBindingMode: BindingMode.TwoWay);
+
+    /// <summary>
+    ///     Gets the command to execute when deleting stops.
+    /// </summary>
+    public static readonly DirectProperty<MaterialIconPicker, ICommand> SelectIconProperty =
+        AvaloniaProperty.RegisterDirect<MaterialIconPicker, ICommand>(nameof(SelectIcon), g => g.SelectIcon);
+
+    private readonly ICommand _selectIcon;
+    private ItemsRepeater? _iconsContainer;
+
+    private SourceList<MaterialIconKind>? _iconsSource;
+    private TextBox? _searchBox;
+    private IDisposable? _sub;
+    private readonly Dictionary<string,MaterialIconKind> _enumNames;
+
+    /// <inheritdoc />
+    public MaterialIconPicker()
+    {
+        _selectIcon = ReactiveCommand.Create<MaterialIconKind>(i =>
+        {
+            Value = i;
+            Flyout?.Hide();
+        });
+
+        // Build a list of enum names and values, this is required because a value may have more than one name
+        _enumNames = new Dictionary<string, MaterialIconKind>();
+        MaterialIconKind[] values = Enum.GetValues<MaterialIconKind>();
+        string[] names = Enum.GetNames<MaterialIconKind>();
+        for (int index = 0; index < names.Length; index++)
+            _enumNames[names[index]] = values[index];
+    }
+
+    /// <summary>
+    ///     Gets or sets the current Material icon.
+    /// </summary>
+    public MaterialIconKind? Value
+    {
+        get => GetValue(ValueProperty);
+        set => SetValue(ValueProperty, value);
+    }
+
+    /// <summary>
+    ///     Gets the command to execute when deleting stops.
+    /// </summary>
+    public ICommand SelectIcon
+    {
+        get => _selectIcon;
+        private init => SetAndRaise(SelectIconProperty, ref _selectIcon, value);
+    }
+
+    internal MaterialIconPickerFlyout? Flyout { get; set; }
+
+    private void Setup()
+    {
+        if (_searchBox == null || _iconsContainer == null)
+            return;
+
+        // Build a list of values, they are not unique because a value with multiple names occurs once per name
+        _iconsSource = new SourceList<MaterialIconKind>();
+        _iconsSource.AddRange(Enum.GetValues<MaterialIconKind>().Distinct());
+        _sub = _iconsSource.Connect()
+            .Filter(_searchBox.WhenAnyValue(s => s.Text).Throttle(TimeSpan.FromMilliseconds(100)).Select(CreatePredicate))
+            .Sort(SortExpressionComparer<MaterialIconKind>.Descending(p => p.ToString()))
+            .Bind(out ReadOnlyObservableCollection<MaterialIconKind> icons)
+            .Subscribe();
+        _iconsContainer.ItemsSource = icons;
+    }
+
+    #region Overrides of TemplatedControl
+
+    /// <inheritdoc />
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        _searchBox = e.NameScope.Find<TextBox>("SearchBox");
+        _iconsContainer = e.NameScope.Find<ItemsRepeater>("IconsContainer");
+
+        Setup();
+        base.OnApplyTemplate(e);
+    }
+
+    /// <inheritdoc />
+    protected override void OnAttachedToLogicalTree(LogicalTreeAttachmentEventArgs e)
+    {
+        Setup();
+        base.OnAttachedToLogicalTree(e);
+    }
+
+    /// <inheritdoc />
+    protected override void OnDetachedFromLogicalTree(LogicalTreeAttachmentEventArgs e)
+    {
+        _iconsSource?.Dispose();
+        _iconsSource = null;
+        _sub?.Dispose();
+        _sub = null;
+
+        if (_searchBox != null)
+            _searchBox.Text = "";
+        base.OnDetachedFromLogicalTree(e);
+    }
+
+    private Func<MaterialIconKind, bool> CreatePredicate(string? text)
+    {
+        if (string.IsNullOrWhiteSpace(text))
+            return _ => true;
+
+        // Strip out whitespace and find all matching enum values
+        text = StripWhiteSpaceRegex().Replace(text, "");
+        HashSet<MaterialIconKind> values = _enumNames.Where(n => n.Key.Contains(text, StringComparison.OrdinalIgnoreCase)).Select(n => n.Value).ToHashSet();
+        // Only show those that matched
+        return data => values.Contains(data);
+    }
+
+    [GeneratedRegex("\\s+")]
+    private static partial Regex StripWhiteSpaceRegex();
+
+    #endregion
+}

src/Artemis.UI.Shared/Controls/MaterialIconPicker/MaterialIconPickerButton.cs

@@ -0,0 +1,137 @@
+using System;
+using Artemis.UI.Shared.Flyouts;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Data;
+using Avalonia.Interactivity;
+using FluentAvalonia.Core;
+using Material.Icons;
+
+namespace Artemis.UI.Shared.MaterialIconPicker;
+
+/// <summary>
+///     Represents a button that can be used to pick a data model path in a flyout.
+/// </summary>
+public class MaterialIconPickerButton : TemplatedControl
+{
+    /// <summary>
+    ///     Gets or sets the placeholder to show when nothing is selected.
+    /// </summary>
+    public static readonly StyledProperty<string> PlaceholderProperty =
+        AvaloniaProperty.Register<MaterialIconPicker, string>(nameof(Placeholder), "Click to select");
+
+    /// <summary>
+    ///     Gets or sets the current Material icon.
+    /// </summary>
+    public static readonly StyledProperty<MaterialIconKind?> ValueProperty =
+        AvaloniaProperty.Register<MaterialIconPicker, MaterialIconKind?>(nameof(Value), defaultBindingMode: BindingMode.TwoWay);
+
+    /// <summary>
+    ///     Gets or sets the desired flyout placement.
+    /// </summary>
+    public static readonly StyledProperty<PlacementMode> PlacementProperty =
+        AvaloniaProperty.Register<FlyoutBase, PlacementMode>(nameof(Placement), PlacementMode.BottomEdgeAlignedLeft);
+
+    private Button? _button;
+    private MaterialIconPickerFlyout? _flyout;
+    private bool _flyoutActive;
+
+    /// <summary>
+    ///     Gets or sets the placeholder to show when nothing is selected.
+    /// </summary>
+    public string Placeholder
+    {
+        get => GetValue(PlaceholderProperty);
+        set => SetValue(PlaceholderProperty, value);
+    }
+
+    /// <summary>
+    ///     Gets or sets the current Material icon.
+    /// </summary>
+    public MaterialIconKind? Value
+    {
+        get => GetValue(ValueProperty);
+        set => SetValue(ValueProperty, value);
+    }
+
+    /// <summary>
+    ///     Gets or sets the desired flyout placement.
+    /// </summary>
+    public PlacementMode Placement
+    {
+        get => GetValue(PlacementProperty);
+        set => SetValue(PlacementProperty, value);
+    }
+
+    /// <summary>
+    ///     Raised when the flyout opens.
+    /// </summary>
+    public event TypedEventHandler<MaterialIconPickerButton, EventArgs>? FlyoutOpened;
+
+    /// <summary>
+    ///     Raised when the flyout closes.
+    /// </summary>
+    public event TypedEventHandler<MaterialIconPickerButton, EventArgs>? FlyoutClosed;
+
+    private void OnButtonClick(object? sender, RoutedEventArgs e)
+    {
+        if (_flyout == null)
+            return;
+
+        MaterialIconPickerFlyout flyout = new();
+        flyout.FlyoutPresenterClasses.Add("material-icon-picker-presenter");
+        flyout.MaterialIconPicker.Value = Value;
+        flyout.Placement = Placement;
+        
+        flyout.Closed += FlyoutOnClosed;
+        flyout.ShowAt(this);
+        FlyoutOpened?.Invoke(this, EventArgs.Empty);
+
+        void FlyoutOnClosed(object? closedSender, EventArgs closedEventArgs)
+        {
+            Value = flyout.MaterialIconPicker.Value;
+            flyout.Closed -= FlyoutOnClosed;
+            FlyoutClosed?.Invoke(this, EventArgs.Empty);
+        }
+    }
+
+    #region Overrides of TemplatedControl
+
+    /// <inheritdoc />
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        if (_button != null)
+            _button.Click -= OnButtonClick;
+        base.OnApplyTemplate(e);
+        _button = e.NameScope.Find<Button>("MainButton");
+        if (_button != null)
+            _button.Click += OnButtonClick;
+    }
+
+    /// <inheritdoc />
+    protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
+    {
+        _flyout ??= new MaterialIconPickerFlyout();
+        _flyout.Closed += OnFlyoutClosed;
+    }
+
+    private void OnFlyoutClosed(object? sender, EventArgs e)
+    {
+        if (_flyoutActive)
+        {
+            FlyoutClosed?.Invoke(this, EventArgs.Empty);
+            _flyoutActive = false;
+        }
+    }
+
+
+    /// <inheritdoc />
+    protected override void OnDetachedFromVisualTree(VisualTreeAttachmentEventArgs e)
+    {
+        if (_flyout != null)
+            _flyout.Closed -= OnFlyoutClosed;
+    }
+
+    #endregion
+}

src/Artemis.UI.Shared/Styles/Artemis.axaml

@@ -18,6 +18,8 @@
     <StyleInclude Source="/Styles/Controls/GradientPickerButton.axaml" />
     <StyleInclude Source="/Styles/Controls/DataModelPicker.axaml" />
     <StyleInclude Source="/Styles/Controls/DataModelPickerButton.axaml" />
+    <StyleInclude Source="/Styles/Controls/MaterialIconPicker.axaml" />
+    <StyleInclude Source="/Styles/Controls/MaterialIconPickerButton.axaml" />
 
     <!-- Custom styles -->
     <StyleInclude Source="/Styles/Border.axaml" />

src/Artemis.UI.Shared/Styles/Controls/GradientPickerButton.axaml

@@ -28,7 +28,6 @@
         <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
         <Setter Property="Template">
             <ControlTemplate>
-
                 <Button
                     Name="MainButton"
                     Padding="0 0 12 0"

src/Artemis.UI.Shared/Styles/Controls/MaterialIconPicker.axaml

@@ -0,0 +1,55 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
+        xmlns:materialIconPicker="clr-namespace:Artemis.UI.Shared.MaterialIconPicker"
+        xmlns:icons="clr-namespace:Material.Icons;assembly=Material.Icons">
+    <Design.PreviewWith>
+        <materialIconPicker:MaterialIconPicker />
+    </Design.PreviewWith>
+
+    <Style Selector="materialIconPicker|MaterialIconPicker">
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Grid RowDefinitions="Auto,*" Width="525" Height="485" Margin="10">
+                    <TextBox Grid.Row="0" Watermark="Search" Name="SearchBox" />
+
+                    <Border Grid.Row="1" Classes="card card-condensed" Margin="0 10 0 0">
+                        <ScrollViewer Name="IconsViewer"
+                                      HorizontalScrollBarVisibility="Disabled"
+                                      VerticalScrollBarVisibility="Auto"
+                                      VerticalAlignment="Top">
+                            <ItemsRepeater Name="IconsContainer">
+                                <ItemsRepeater.Layout>
+                                    <WrapLayout />
+                                </ItemsRepeater.Layout>
+                                <ItemsRepeater.ItemTemplate>
+                                    <DataTemplate x:DataType="icons:MaterialIconKind">
+                                        <Button VerticalAlignment="Bottom"
+                                                HorizontalAlignment="Right"
+                                                Width="72" 
+                                                Height="75"
+                                                Margin="5"
+                                                Padding="1"
+                                                ToolTip.Tip="{CompiledBinding}"
+                                                Command="{CompiledBinding SelectIcon, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type materialIconPicker:MaterialIconPicker}}}"
+                                                CommandParameter="{CompiledBinding}">
+                                            <StackPanel Orientation="Vertical">
+                                                <avalonia:MaterialIcon Kind="{CompiledBinding}" Width="35" Height="35"/>
+                                                <TextBlock Text="{CompiledBinding}" 
+                                                           TextAlignment="Center" 
+                                                           TextTrimming="CharacterEllipsis"
+                                                           Classes="subtitle" 
+                                                           Margin="0 8 0 0"
+                                                           FontSize="10"/>
+                                            </StackPanel>
+                                        </Button>
+                                    </DataTemplate>
+                                </ItemsRepeater.ItemTemplate>
+                            </ItemsRepeater>
+                        </ScrollViewer>
+                    </Border>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </Style>
+</Styles>

src/Artemis.UI.Shared/Styles/Controls/MaterialIconPickerButton.axaml

@@ -0,0 +1,65 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:materialIconPicker="clr-namespace:Artemis.UI.Shared.MaterialIconPicker"
+        xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
+        xmlns:converters="clr-namespace:Artemis.UI.Shared.Converters">
+    <Design.PreviewWith>
+        <Border Padding="20" Width="600" Height="800">
+            <StackPanel Spacing="5">
+                <materialIconPicker:MaterialIconPickerButton Value="Achievement" />
+            </StackPanel>
+        </Border>
+    </Design.PreviewWith>
+
+    <Style Selector="FlyoutPresenter.material-icon-picker-presenter">
+        <Setter Property="Padding" Value="0" />
+        <Setter Property="MaxWidth" Value="1200" />
+        <Setter Property="MaxHeight" Value="1200" />
+        <Setter Property="Background" Value="{DynamicResource SolidBackgroundFillColorBaseBrush}" />
+        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
+        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
+    </Style>
+
+    <Style Selector="materialIconPicker|MaterialIconPickerButton">
+        <Style.Resources>
+            <converters:ToStringConverter x:Key="ToStringConverter" />
+        </Style.Resources>
+        <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrush}" />
+        <Setter Property="MinHeight" Value="{DynamicResource TextControlThemeMinHeight}" />
+        <Setter Property="MinWidth" Value="{DynamicResource TextControlThemeMinWidth}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Button Name="MainButton"
+                        CornerRadius="{TemplateBinding CornerRadius}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                        Width="{TemplateBinding Width}"
+                        Height="{TemplateBinding Height}"
+                        HorizontalContentAlignment="Stretch">
+                    <Grid ColumnDefinitions="*,Auto" HorizontalAlignment="Stretch">
+                        <StackPanel Grid.Column="0" IsVisible="{TemplateBinding Value, Converter={x:Static ObjectConverters.IsNotNull}}" Orientation="Horizontal" Spacing="5">
+                            <avalonia:MaterialIcon Kind="{TemplateBinding Value}"/>
+                            <TextBlock VerticalAlignment="Center" TextAlignment="Left" TextTrimming="CharacterEllipsis" Text="{TemplateBinding Value, Converter={StaticResource ToStringConverter}}"/>
+                        </StackPanel>
+                       
+                        <TextBlock Grid.Column="0"
+                                   Text="{TemplateBinding Placeholder}"
+                                   Foreground="{DynamicResource TextControlPlaceholderForeground}"
+                                   IsVisible="{TemplateBinding Value, Converter={x:Static ObjectConverters.IsNull}}" />
+                        <TextBlock Name="ChevronTextBlock"
+                                   Grid.Column="1"
+                                   FontFamily="{DynamicResource SymbolThemeFontFamily}"
+                                   FontSize="13"
+                                   Text="&#xE70D;"
+                                   VerticalAlignment="Center"
+                                   TextAlignment="Right"
+                                   Padding="2 2 2 0"
+                                   Margin="5 0" />
+                    </Grid>
+                </Button>
+            </ControlTemplate>
+        </Setter>
+    </Style>
+</Styles>

src/Artemis.UI/Screens/Sidebar/Dialogs/ProfileConfigurationEditView.axaml

@@ -8,6 +8,7 @@
                       xmlns:local="clr-namespace:Artemis.UI.Screens.Sidebar"
                       xmlns:shared="clr-namespace:Artemis.UI.Shared;assembly=Artemis.UI.Shared"
                       xmlns:windowing="clr-namespace:FluentAvalonia.UI.Windowing;assembly=FluentAvalonia"
+                      xmlns:materialIconPicker="clr-namespace:Artemis.UI.Shared.MaterialIconPicker;assembly=Artemis.UI.Shared"
                       mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="850"
                       x:Class="Artemis.UI.Screens.Sidebar.ProfileConfigurationEditView"
                       x:DataType="local:ProfileConfigurationEditViewModel"
@@ -108,27 +109,12 @@
                             <Border Background="{DynamicResource CheckerboardBrush}" CornerRadius="{DynamicResource CardCornerRadius}" Width="78" Height="78">
                                 <avalonia:MaterialIcon Kind="{CompiledBinding SelectedMaterialIcon.Icon}" Width="45" Height="45" />
                             </Border>
-                            <ComboBox ItemsSource="{CompiledBinding MaterialIcons}"
+                            <materialIconPicker:MaterialIconPickerButton 
-                                      SelectedItem="{CompiledBinding SelectedMaterialIcon}"
+                                Value="{CompiledBinding SelectedMaterialIcon.Icon}"
-                                      VerticalAlignment="Bottom"
-                                      IsTextSearchEnabled="True"
                                 Margin="10 0"
                                 Width="250"
-                                      IsVisible="{CompiledBinding IconType, Converter={StaticResource EnumBoolConverter}, ConverterParameter={x:Static core:ProfileConfigurationIconType.MaterialIcon}}">
+                                VerticalAlignment="Bottom" 
-                                <ComboBox.ItemsPanel>
+                                IsVisible="{CompiledBinding IconType, Converter={StaticResource EnumBoolConverter}, ConverterParameter={x:Static core:ProfileConfigurationIconType.MaterialIcon}}"/>
-                                    <ItemsPanelTemplate>
-                                        <VirtualizingStackPanel />
-                                    </ItemsPanelTemplate>
-                                </ComboBox.ItemsPanel>
-                                <ComboBox.ItemTemplate>
-                                    <DataTemplate DataType="local:ProfileIconViewModel">
-                                        <StackPanel Orientation="Horizontal">
-                                            <avalonia:MaterialIcon Kind="{CompiledBinding Icon}" Margin="0 0 5 0" />
-                                            <TextBlock Text="{CompiledBinding DisplayName}" />
-                                        </StackPanel>
-                                    </DataTemplate>
-                                </ComboBox.ItemTemplate>
-                            </ComboBox>
                         </StackPanel>
 
                         <CheckBox VerticalAlignment="Bottom" IsChecked="{CompiledBinding FadeInAndOut}" ToolTip.Tip="Smoothly animates in and out when the profile activation conditions change.">

src/Artemis.UI/Screens/Sidebar/Dialogs/ProfileConfigurationEditViewModel.cs

@@ -32,7 +32,6 @@ public class ProfileConfigurationEditViewModel : DialogViewModelBase<ProfileConf
     private bool _fadeInAndOut;
     private ProfileConfigurationHotkeyMode _hotkeyMode;
     private ProfileConfigurationIconType _iconType;
-    private ObservableCollection<ProfileIconViewModel>? _materialIcons;
     private ProfileConfiguration _profileConfiguration;
     private string _profileName;
     private Bitmap? _selectedBitmapSource;
@@ -186,12 +185,6 @@ public class ProfileConfigurationEditViewModel : DialogViewModelBase<ProfileConf
         set => RaiseAndSetIfChanged(ref _iconType, value);
     }
     
-    public ObservableCollection<ProfileIconViewModel>? MaterialIcons
-    {
-        get => _materialIcons;
-        set => RaiseAndSetIfChanged(ref _materialIcons, value);
-    }
-
     public ProfileIconViewModel? SelectedMaterialIcon
     {
         get => _selectedMaterialIcon;
@@ -227,7 +220,6 @@ public class ProfileConfigurationEditViewModel : DialogViewModelBase<ProfileConf
         SelectedMaterialIcon = !IsNew && Enum.TryParse(_profileConfiguration.Icon.IconName, out MaterialIconKind enumValue)
             ? icons.FirstOrDefault(m => m.Icon == enumValue)
             : icons.ElementAt(new Random().Next(0, icons.Count - 1));
-        MaterialIcons = icons;
     }
 
     private async Task SaveIcon()

src/Artemis.UI/Screens/Sidebar/Dialogs/ProfileIconViewModel.cs

@@ -5,11 +5,20 @@ namespace Artemis.UI.Screens.Sidebar;
 
 public class ProfileIconViewModel : ViewModelBase
 {
+    private MaterialIconKind _icon;
+
     public ProfileIconViewModel(MaterialIconKind icon)
     {
         Icon = icon;
-        DisplayName = icon.ToString();
     }
 
-    public MaterialIconKind Icon { get; }
+    public MaterialIconKind Icon
+    {
+        get => _icon;
+        set
+        {
+            RaiseAndSetIfChanged(ref _icon, value);
+            DisplayName = _icon.ToString();
+        }
+    }
 }

src/Artemis.UI/Screens/Workshop/WorkshopView.axaml

@@ -9,6 +9,7 @@
              xmlns:shared="clr-namespace:Artemis.UI.Shared;assembly=Artemis.UI.Shared"
              xmlns:controls="clr-namespace:Artemis.UI.Shared.Controls;assembly=Artemis.UI.Shared"
              xmlns:gradientPicker="clr-namespace:Artemis.UI.Shared.Controls.GradientPicker;assembly=Artemis.UI.Shared"
+             xmlns:materialIconPicker="clr-namespace:Artemis.UI.Shared.MaterialIconPicker;assembly=Artemis.UI.Shared"
              mc:Ignorable="d" d:DesignWidth="800"
              x:Class="Artemis.UI.Screens.Workshop.WorkshopView"
              x:DataType="workshop:WorkshopViewModel">
@@ -59,6 +60,9 @@
                             Create random gradient
                         </Button>
                         <gradientPicker:GradientPickerButton ColorGradient="{CompiledBinding ColorGradient}" IsCompact="True" />
+                        
+                        <materialIconPicker:MaterialIconPickerButton Name="IconPicker" Value="Abc"/>
+                        <TextBlock Text="{CompiledBinding #IconPicker.Value}"></TextBlock>
                     </StackPanel>
                 </Border>
             </StackPanel>