What is the 'right' way to resize a SymbolIcon?

Question

I want to be able to define a style and set the style on the icon (or on the button that holds the icon).

Setting the button h/w doesn't enlarge the symbol and adding a Viewbox works, but I can't figure out how to set that from a style.

<Button x:Name="ZoomInButton" Style="{ThemeResource HeaderButtonStyle}" Grid.Column="1" Grid.Row="0" Click="ZoomInButton_Click">
   <SymbolIcon Symbol="ZoomIn" />
</Button>

Any help very much appreciated! Seems so easy, but I'm stumped!

Syndesis

Answer 1

In UWP apps, the standard glyphs are provided by the Segoe MDL2 Assets font, you can directly use a TextBlock with FontFamily="Segoe MDL2 Assets", so you can change the icon's size by setting the FontSize of the TextBlock.

For example here:

<Button x:Name="ZoomInButton" Style="{ThemeResource HeaderButtonStyle}" Grid.Column="1" Grid.Row="0" Click="ZoomInButton_Click">
   <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xE8A3;" FontSize="30" />
</Button>

For more info about this font, you can refer to Guidelines for Segoe MDL2 icons.

Selfanalysis

Thanks Grace! I saw this for Windows 8 but it sure is nicer to be able to use the names! I can't understand why ms would provide the nice icons without a way to specify size. – Syndesis

Life. Saver. :) – Valenzuela

Answer 2

Instead of using a SymbolIcon or TextBlock I suggest using a FontIcon instead:

<Button x:Name="ZoomInButton" Style="{ThemeResource HeaderButtonStyle}" Grid.Column="1" Grid.Row="0" Click="ZoomInButton_Click">
   <FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE8A3;" FontSize="30" />
</Button>

Francis