Properly fall back to Segoe MDL2 for our icons on Win10 (#12438)

Segoe Fluent isn't available on Windows 10, and doesn't stealthily ship with WinUI. So if we manually set the font family to `"Segoe Fluent Icons"`, then that will just display boxes in Win10. This instead uses the resource `"{ThemeResource SymbolThemeFontFamily}"` which will gracefully fall back on Win10. See: * microsoft/microsoft-ui-xaml#3745, which inspired this solution. Guess what! The backgound image icons were also manually specifying this font, so they had to get updated too. I couldn't find any other `Segoe Fluent` references in the code. * [x] Closes #12350 * [x] Checked Windows 11 locally * [x] Checked Win10 (screenshots incoming from other machine)
microsoft · Feb 8, 2022 · 27a1b9d · 27a1b9d
1 parent dbb7077
commit 27a1b9d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/src/cascadia/TerminalSettingsEditor/Appearances.xaml b/src/cascadia/TerminalSettingsEditor/Appearances.xaml
@@ -292,7 +292,7 @@
                             <x:Int32>17</x:Int32>
                         </ToggleButton.Tag>
                         <ToggleButton.Content>
-                            <FontIcon FontFamily="Segoe Fluent Icons"
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                       Glyph="&#xE744;"
                                       RenderTransformOrigin="0.5,0.5">
                                 <FontIcon.RenderTransform>
@@ -312,7 +312,7 @@
                             <x:Int32>16</x:Int32>
                         </ToggleButton.Tag>
                         <ToggleButton.Content>
-                            <FontIcon FontFamily="Segoe Fluent Icons"
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                       Glyph="&#xE745;"
                                       RenderTransformOrigin="0.5,0.5">
                                 <FontIcon.RenderTransform>
@@ -332,7 +332,7 @@
                             <x:Int32>18</x:Int32>
                         </ToggleButton.Tag>
                         <ToggleButton.Content>
-                            <FontIcon FontFamily="Segoe Fluent Icons"
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                       Glyph="&#xEA5F;"
                                       RenderTransformOrigin="0.5,0.5">
                                 <FontIcon.RenderTransform>
@@ -354,7 +354,7 @@
                             <x:Int32>1</x:Int32>
                         </ToggleButton.Tag>
                         <ToggleButton.Content>
-                            <FontIcon FontFamily="Segoe Fluent Icons"
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                       Glyph="&#xE746;" />
                         </ToggleButton.Content>
                     </ToggleButton>
@@ -369,7 +369,7 @@
                             <x:Int32>0</x:Int32>
                         </ToggleButton.Tag>
                         <ToggleButton.Content>
-                            <FontIcon FontFamily="Segoe Fluent Icons"
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                       Glyph="&#xF16E;" />
                         </ToggleButton.Content>
                     </ToggleButton>
@@ -384,7 +384,7 @@
                             <x:Int32>2</x:Int32>
                         </ToggleButton.Tag>
                         <ToggleButton.Content>
-                            <FontIcon FontFamily="Segoe Fluent Icons"
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                       Glyph="&#xEA61;" />
                         </ToggleButton.Content>
                     </ToggleButton>
@@ -401,7 +401,7 @@
                             <x:Int32>33</x:Int32>
                         </ToggleButton.Tag>
                         <ToggleButton.Content>
-                            <FontIcon FontFamily="Segoe Fluent Icons"
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                       Glyph="&#xE744;" />
                         </ToggleButton.Content>
                     </ToggleButton>
@@ -416,7 +416,7 @@
                             <x:Int32>32</x:Int32>
                         </ToggleButton.Tag>
                         <ToggleButton.Content>
-                            <FontIcon FontFamily="Segoe Fluent Icons"
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                       Glyph="&#xE745;" />
                         </ToggleButton.Content>
                     </ToggleButton>
@@ -431,7 +431,7 @@
                             <x:Int32>34</x:Int32>
                         </ToggleButton.Tag>
                         <ToggleButton.Content>
-                            <FontIcon FontFamily="Segoe Fluent Icons"
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                       Glyph="&#xEA5F;" />
                         </ToggleButton.Content>
                     </ToggleButton>

diff --git a/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml b/src/cascadia/TerminalSettingsEditor/SettingContainerStyle.xaml
@@ -68,7 +68,7 @@
            TargetType="FontIcon">
         <Setter Property="Foreground" Value="{StaticResource SystemAccentColor}" />
         <Setter Property="FontSize" Value="11" />
-        <Setter Property="FontFamily" Value="Segoe Fluent Icons" />
+        <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
     </Style>
 
     <Style x:Key="NonExpanderGrid"