How to colorize Segoe MDL2 Icons in WPF?

Question

I am looking for a way to add colour to Segoe MDL2 icons. The glyphs in my application are currently TextBlock resources, defined like this:

<TextBlock x:Key="PenSymbol" x:Shared="False" FontFamily="Segoe MDL2 Assets" Text="&#xE76D;" FontSize="16" TextOptions.TextRenderingMode="Grayscale"/>

The effect I'm after is the one in the left 3 icons:

This is a screenshot of the toolbar in Window 10 Sketchpad (after applying the Creators update).

Edit: I know how to change the text colour, I am trying to figure out how to get the "partial fill"-effect (blue, black and yellow in the screenshot).

Edit2: It is necessary to display 2 different glyphs to achieve this effect. The glyphs necessary for the background were added to the Segoe MDL2 font in the last update. Thanks to mm8 for pointing me in the right direction.

XAML:

<Style x:Key="SymbolText" TargetType="{x:Type TextBlock}">
    <Setter Property="FontSize" Value="16"/>
    <Setter Property="UseLayoutRounding" Value="True"/>
    <Setter Property="TextAlignment" Value="Center"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="FontFamily" Value="Segoe MDL2 Assets"/>
    <Setter Property="TextOptions.TextRenderingMode" Value="Grayscale"/>
</Style>

<StackPanel Orientation="Horizontal">
    <Grid Margin="4">
        <TextBlock Text="&#xE88F;" Style="{StaticResource SymbolText}" Foreground="OrangeRed"/>
        <TextBlock Text="&#xE76D;" Style="{StaticResource SymbolText}"/>
    </Grid>
    <Grid Margin="4">
        <TextBlock Text="&#xF0C6;" Style="{StaticResource SymbolText}" Foreground="LightGreen"/>
        <TextBlock Text="&#xED63;" Style="{StaticResource SymbolText}"/>
    </Grid>
    <Grid Margin="4">
        <TextBlock Text="&#xE891;" Style="{StaticResource SymbolText}" Foreground="LightBlue"/>
        <TextBlock Text="&#xE193;" Style="{StaticResource SymbolText}"/>
    </Grid>
</StackPanel>

Result:

Answer 1

Set the Foreground property to a Brush:

<TextBlock x:Key="PenSymbol" x:Shared="False" Foreground="Red" FontFamily="Segoe MDL2 Assets" Text="&#xE76D;" FontSize="16"/>

Othwerwise layering and colorization effects can be achieved by drawing glyphs directly on top of each other as stated in the documentation on MSDN: https://docs.microsoft.com/en-us/windows/uwp/style/segoe-ui-symbol-font

Answer 2

You can put one gliph over another and colorize it this way. Example:

<Grid>
    <FontIcon Foreground="#f8d876" FontFamily="Segoe MDL2 Assets" Glyph="&#xE8D5;" />
    <FontIcon  FontFamily="Segoe MDL2 Assets" Glyph="&#xE8B7;" />
</Grid>

Result: