Feature: Updated color icons

src/Files.App/Helpers/ContextFlyoutItemHelper.cs

@@ -4,8 +4,8 @@
 using Files.App.Filesystem;
 using Files.App.Interacts;
 using Files.App.ViewModels;
-using Files.Backend.Services;
 using Files.Backend.Helpers;
+using Files.Backend.Services;
 using Files.Backend.Services.Settings;
 using Files.Shared.Enums;
 using Microsoft.UI.Xaml.Input;
@@ -19,7 +19,6 @@
 using Windows.ApplicationModel.DataTransfer;
 using Windows.Storage;
 using Windows.System;
-using Files.App.ServicesImplementation.Settings;
 
 namespace Files.App.Helpers
 {
@@ -524,11 +523,11 @@ public static List<ContextMenuFlyoutItemViewModel> GetBaseLayoutMenuItems(Curren
 				{
 					Text = "BaseLayoutContextFlyoutPaste/Text".GetLocalizedResource(),
 					IsPrimary = true,
-					// Glyph = "\uF16D",
 					ShowInFtpPage = true,
 					ShowInZipPage = true,
 					ColoredIcon = new ColoredIconModel()
 					{
+						BaseBackdropGlyph = "\uF052",
 						BaseLayerGlyph = "\uF023",
 						OverlayLayerGlyph = "\uF024",
 					},
@@ -552,6 +551,7 @@ public static List<ContextMenuFlyoutItemViewModel> GetBaseLayoutMenuItems(Curren
 					Text = "BaseLayoutContextFlyoutNew/Label".GetLocalizedResource(),
 					ColoredIcon = new ColoredIconModel()
 					{
+						BaseBackdropGlyph = "\uF051",
 						BaseLayerGlyph = "\uF037",
 						OverlayLayerGlyph = "\uF038"
 					},
@@ -679,7 +679,11 @@ public static List<ContextMenuFlyoutItemViewModel> GetBaseItemMenuItems(BaseLayo
 				new ContextMenuFlyoutItemViewModel()
 				{
 					Text = "Open".GetLocalizedResource(),
-					Glyph = "\uE8E5",
+					ColoredIcon = new ColoredIconModel()
+					{
+						BaseLayerGlyph = "\uF047",
+						OverlayLayerGlyph = "\uF048",
+					},
 					Command = commandsViewModel.OpenItemCommand,
 					ShowInSearchPage = true,
 					ShowInFtpPage = true,
@@ -689,7 +693,11 @@ public static List<ContextMenuFlyoutItemViewModel> GetBaseItemMenuItems(BaseLayo
 				new ContextMenuFlyoutItemViewModel()
 				{
 					Text = "BaseLayoutItemContextFlyoutOpenItemWith/Text".GetLocalizedResource(),
-					Glyph = "\uE17D",
+					ColoredIcon = new ColoredIconModel()
+					{
+						BaseLayerGlyph = "\uF049",
+						OverlayLayerGlyph = "\uF04A",
+					},
 					Command = commandsViewModel.OpenItemWithApplicationPickerCommand,
 					Tag = "OpenWith",
 					CollapseLabel = true,
@@ -699,7 +707,11 @@ public static List<ContextMenuFlyoutItemViewModel> GetBaseItemMenuItems(BaseLayo
 				new ContextMenuFlyoutItemViewModel()
 				{
 					Text = "BaseLayoutItemContextFlyoutOpenItemWith/Text".GetLocalizedResource(),
-					Glyph = "\uE17D",
+					ColoredIcon = new ColoredIconModel()
+					{
+						BaseLayerGlyph = "\uF049",
+						OverlayLayerGlyph = "\uF04A",
+					},
 					Tag = "OpenWithOverflow",
 					IsHidden = true,
 					CollapseLabel = true,
@@ -745,8 +757,12 @@ public static List<ContextMenuFlyoutItemViewModel> GetBaseItemMenuItems(BaseLayo
 				new ContextMenuFlyoutItemViewModel()
 				{
 					Text = "OpenInNewPane".GetLocalizedResource(),
-					Glyph = "\xF117",
-					GlyphFontFamilyName = "CustomGlyph",
+					ColoredIcon = new ColoredIconModel()
+					{
+						BaseBackdropGlyph = "\uF056",
+						BaseLayerGlyph = "\uF03B",
+						OverlayLayerGlyph = "\uF03C",
+					},
 					Command = commandsViewModel.OpenDirectoryInNewPaneCommand,
 					ShowItem = userSettingsService.PreferencesSettingsService.ShowOpenInNewPane && areAllItemsFolders,
 					SingleItemOnly = true,
@@ -860,8 +876,8 @@ public static List<ContextMenuFlyoutItemViewModel> GetBaseItemMenuItems(BaseLayo
 					Text = "CopyLocation".GetLocalizedResource(),
 					ColoredIcon = new ColoredIconModel()
 					{
-						BaseLayerGlyph = "\uF02F",
-						OverlayLayerGlyph = "\uF030"
+						BaseLayerGlyph = "\uF04F",
+						OverlayLayerGlyph = "\uF050"
 					},
 					Command = commandsViewModel.CopyPathOfSelectedItemCommand,
 					SingleItemOnly = true,
@@ -876,6 +892,7 @@ public static List<ContextMenuFlyoutItemViewModel> GetBaseItemMenuItems(BaseLayo
 					IsPrimary = true,
 					ColoredIcon = new ColoredIconModel()
 					{
+						BaseBackdropGlyph = "\uF052",
 						BaseLayerGlyph = "\uF023",
 						OverlayLayerGlyph = "\uF024",
 					},
@@ -906,8 +923,11 @@ public static List<ContextMenuFlyoutItemViewModel> GetBaseItemMenuItems(BaseLayo
 				new ContextMenuFlyoutItemViewModel()
 				{
 					Text = "BaseLayoutItemContextFlyoutShortcut/Text".GetLocalizedResource(),
-					Glyph = "\uF10A",
-					GlyphFontFamilyName = "CustomGlyph",
+					ColoredIcon = new ColoredIconModel()
+					{
+						BaseLayerGlyph = "\uF04B",
+						OverlayLayerGlyph = "\uF04C"
+					},
 					Command = commandsViewModel.CreateShortcutCommand,
 					ShowItem = !selectedItems.FirstOrDefault()?.IsShortcut ?? false,
 					SingleItemOnly = true,
@@ -916,10 +936,10 @@ public static List<ContextMenuFlyoutItemViewModel> GetBaseItemMenuItems(BaseLayo
 				new ContextMenuFlyoutItemViewModel()
 				{
 					Text = "BaseLayoutItemContextFlyoutRename/Text".GetLocalizedResource(),
-					//Glyph = "\uF8AC",
 					IsPrimary = true,
 					ColoredIcon = new ColoredIconModel()
 					{
+						BaseBackdropGlyph = "\uF054",
 						BaseLayerGlyph = "\uF027",
 						OverlayLayerGlyph = "\uF028",
 					},
@@ -937,7 +957,6 @@ public static List<ContextMenuFlyoutItemViewModel> GetBaseItemMenuItems(BaseLayo
 				new ContextMenuFlyoutItemViewModel()
 				{
 					Text = "BaseLayoutItemContextFlyoutShare/Text".GetLocalizedResource(),
-					//Glyph = "\uF72D",
 					IsPrimary = true,
 					ColoredIcon = new ColoredIconModel()
 					{
@@ -950,10 +969,10 @@ public static List<ContextMenuFlyoutItemViewModel> GetBaseItemMenuItems(BaseLayo
 				new ContextMenuFlyoutItemViewModel()
 				{
 					Text = "Delete".GetLocalizedResource(),
-					//Glyph = "\uF74D",
 					IsPrimary = true,
 					ColoredIcon = new ColoredIconModel()
 					{
+						BaseBackdropGlyph = "\uF053",
 						BaseLayerGlyph = "\uF035",
 						OverlayLayerGlyph = "\uF036"
 					},
@@ -971,7 +990,6 @@ public static List<ContextMenuFlyoutItemViewModel> GetBaseItemMenuItems(BaseLayo
 				new ContextMenuFlyoutItemViewModel()
 				{
 					Text = "BaseLayoutItemContextFlyoutProperties/Text".GetLocalizedResource(),
-					//Glyph = "\uF946",
 					IsPrimary = true,
 					ColoredIcon = new ColoredIconModel()
 					{

src/Files.App/UserControls/ColoredIcon.xaml

@@ -31,22 +31,29 @@
 			</ResourceDictionary.ThemeDictionaries>
 		</ResourceDictionary>
 	</UserControl.Resources>
-	<Canvas
-		Width="19"
-		Height="19"
+	<Grid
+		Width="24"
+		Height="24"
 		HorizontalAlignment="Stretch"
 		VerticalAlignment="Stretch">
+		<FontIcon
+			x:Name="BaseBackdrop"
+			VerticalAlignment="Center"
+			FontFamily="{StaticResource ColoredIconFontFamily}"
+			FontSize="22"
+			Foreground="{ThemeResource ControlFillColorDefaultBrush}"
+			Glyph="{x:Bind BaseBackdropGlyph, Mode=OneWay}" />
 		<FontIcon
 			x:Name="BaseIcon"
-			Canvas.Left="0"
-			Canvas.Top="-1"
+			VerticalAlignment="Center"
 			FontFamily="{StaticResource ColoredIconFontFamily}"
+			FontSize="22"
 			Glyph="{x:Bind BaseLayerGlyph, Mode=OneWay}" />
 		<FontIcon
 			x:Name="OverlayIcon"
-			Canvas.Left="0"
-			Canvas.Top="-1"
+			VerticalAlignment="Center"
 			FontFamily="{StaticResource ColoredIconFontFamily}"
+			FontSize="22"
 			Foreground="{ThemeResource ColoredIconOverlayForeground}"
 			Glyph="{x:Bind OverlayLayerGlyph, Mode=OneWay}"
 			HighContrastAdjustment="None" />
@@ -57,14 +64,16 @@
 				<VisualState x:Name="Disabled">
 					<VisualState.Setters>
 						<Setter Target="OverlayIcon.Foreground" Value="{ThemeResource ColoredIconOverlayForegroundDisabled}" />
+						<Setter Target="BaseBackdrop.Foreground" Value="Transparent" />
 					</VisualState.Setters>
 				</VisualState>
 				<VisualState x:Name="Checked">
 					<VisualState.Setters>
 						<Setter Target="OverlayIcon.Foreground" Value="{ThemeResource ColoredIconOverlayForegroundChecked}" />
+						<Setter Target="BaseBackdrop.Foreground" Value="{ThemeResource ControlFillColorDefaultBrush}" />
 					</VisualState.Setters>
 				</VisualState>
 			</VisualStateGroup>
 		</VisualStateManager.VisualStateGroups>
-	</Canvas>
+	</Grid>
 </UserControl>

src/Files.App/UserControls/ColoredIcon.xaml.cs

@@ -8,6 +8,12 @@ namespace Files.App.UserControls
 {
 	public sealed partial class ColoredIcon : UserControl
 	{
+		public string BaseBackdropGlyph
+		{
+			get => (string)GetValue(BaseBackdropPathProperty);
+			set => SetValue(BaseBackdropPathProperty, value);
+		}
+
 		public string BaseLayerGlyph
 		{
 			get => (string)GetValue(BaseLayerPathProperty);
@@ -20,6 +26,10 @@ public string OverlayLayerGlyph
 			set => SetValue(OverlayLayerPathProperty, value);
 		}
 
+		// Using a DependencyProperty as the backing store for BaseBackdropPath.  This enables animation, styling, binding, etc...
+		public static readonly DependencyProperty BaseBackdropPathProperty =
+			DependencyProperty.Register(nameof(BaseBackdropGlyph), typeof(string), typeof(ColoredIcon), new PropertyMetadata(null));
+
 		// Using a DependencyProperty as the backing store for OverlayLayerPath.  This enables animation, styling, binding, etc...
 		public static readonly DependencyProperty OverlayLayerPathProperty =
 			DependencyProperty.Register(nameof(OverlayLayerGlyph), typeof(string), typeof(ColoredIcon), new PropertyMetadata(null));

src/Files.App/UserControls/InnerNavigationToolbar.xaml

@@ -100,6 +100,7 @@
 
 					<local:ColoredIcon
 						Margin="0,1,0,-1"
+						BaseBackdropGlyph="&#xF051;"
 						BaseLayerGlyph="&#xF037;"
 						OverlayLayerGlyph="&#xF038;" />
 				</AppBarButton>
@@ -148,7 +149,10 @@
 							IsEnabled="False"
 							Modifiers="Control" />
 					</AppBarButton.KeyboardAccelerators>
-					<local:ColoredIcon BaseLayerGlyph="&#xF023;" OverlayLayerGlyph="&#xF024;" />
+					<local:ColoredIcon
+						BaseBackdropGlyph="&#xF051;"
+						BaseLayerGlyph="&#xF023;"
+						OverlayLayerGlyph="&#xF024;" />
 				</AppBarButton>
 				<AppBarButton
 					x:Name="RenameButton"
@@ -162,7 +166,10 @@
 					LabelPosition="Collapsed"
 					ToolTipService.ToolTip="{helpers:ResourceString Name=BaseLayoutItemContextFlyoutRename/Text}">
 					<AppBarButton.Content>
-						<local:ColoredIcon BaseLayerGlyph="&#xF027;" OverlayLayerGlyph="&#xF028;" />
+						<local:ColoredIcon
+							BaseBackdropGlyph="&#xF054;"
+							BaseLayerGlyph="&#xF027;"
+							OverlayLayerGlyph="&#xF028;" />
 					</AppBarButton.Content>
 				</AppBarButton>
 				<AppBarButton
@@ -176,7 +183,10 @@
 					LabelPosition="Collapsed"
 					ToolTipService.ToolTip="{helpers:ResourceString Name=BaseLayoutItemContextFlyoutShare/Text}">
 					<AppBarButton.Content>
-						<local:ColoredIcon BaseLayerGlyph="&#xF025;" OverlayLayerGlyph="&#xF026;" />
+						<local:ColoredIcon
+							BaseBackdropGlyph="&#xF054;"
+							BaseLayerGlyph="&#xF025;"
+							OverlayLayerGlyph="&#xF026;" />
 					</AppBarButton.Content>
 				</AppBarButton>
 				<AppBarButton
@@ -190,7 +200,10 @@
 					LabelPosition="Collapsed"
 					ToolTipService.ToolTip="{helpers:ResourceString Name=Delete}">
 					<AppBarButton.Content>
-						<local:ColoredIcon BaseLayerGlyph="&#xF035;" OverlayLayerGlyph="&#xF036;" />
+						<local:ColoredIcon
+							BaseBackdropGlyph="&#xF053;"
+							BaseLayerGlyph="&#xF035;"
+							OverlayLayerGlyph="&#xF036;" />
 					</AppBarButton.Content>
 				</AppBarButton>
 				<AppBarButton
@@ -456,7 +469,10 @@
 					</MenuFlyout>
 				</AppBarButton.Flyout>
 
-				<local:ColoredIcon BaseLayerGlyph="&#xF02B;" OverlayLayerGlyph="&#xF02C;" />
+				<local:ColoredIcon
+					BaseBackdropGlyph="&#xF055;"
+					BaseLayerGlyph="&#xF02B;"
+					OverlayLayerGlyph="&#xF02C;" />
 			</AppBarButton>
 			<AppBarButton
 				x:Name="ArrangementOptions"
@@ -831,7 +847,10 @@
 				ToolTipService.ToolTip="{helpers:ResourceString Name=PreviewPaneToggle/ToolTipService/ToolTip}"
 				Visibility="{x:Bind ShowPreviewPaneButton, Mode=OneWay}">
 				<AppBarToggleButton.Content>
-					<local:ColoredIcon BaseLayerGlyph="&#xF03b;" OverlayLayerGlyph="&#xF03c;" />
+					<local:ColoredIcon
+						BaseBackdropGlyph="&#xF056;"
+						BaseLayerGlyph="&#xF03b;"
+						OverlayLayerGlyph="&#xF03c;" />
 				</AppBarToggleButton.Content>
 			</AppBarToggleButton>
 			<CommandBar.SecondaryCommands>

src/Files.App/ViewModels/ContextMenuFlyoutItemViewModel.cs

@@ -98,10 +98,13 @@ public struct ColoredIconModel
 
 		public string BaseLayerGlyph { get; set; }
 
+		public string BaseBackdropGlyph { get; set; }
+
 		public ColoredIcon ToColoredIcon() => new()
 		{
 			OverlayLayerGlyph = OverlayLayerGlyph,
 			BaseLayerGlyph = BaseLayerGlyph,
+			BaseBackdropGlyph = BaseBackdropGlyph,
 		};
 
 		public bool IsValid => !string.IsNullOrEmpty(BaseLayerGlyph);