title: How to colorize Segoe MDL2 Icons in WPF?
body: <p>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:</p>
  
  <pre><code>&lt;TextBlock x:Key="PenSymbol" x:Shared="False" FontFamily="Segoe MDL2 Assets" Text="&amp;#xE76D;" FontSize="16" TextOptions.TextRenderingMode="Grayscale"/&gt;
  </code></pre>
  
  <p>The effect I'm after is the one in the left 3 icons:
  <a href="https://i.stack.imgur.com/tSN34.png" rel="noreferrer"><img src="https://i.stack.imgur.com/tSN34.png" alt="SketchPad Toolbar"></a></p>
  
  <p>This is a screenshot of the toolbar in Window 10 Sketchpad (after applying the Creators update).</p>
  
  <p>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).</p>
  
  <p>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.</p>
  
  <p>XAML:</p>
  
  <pre><code>&lt;Style x:Key="SymbolText" TargetType="{x:Type TextBlock}"&gt;
      &lt;Setter Property="FontSize" Value="16"/&gt;
      &lt;Setter Property="UseLayoutRounding" Value="True"/&gt;
      &lt;Setter Property="TextAlignment" Value="Center"/&gt;
      &lt;Setter Property="VerticalAlignment" Value="Center"/&gt;
      &lt;Setter Property="FontFamily" Value="Segoe MDL2 Assets"/&gt;
      &lt;Setter Property="TextOptions.TextRenderingMode" Value="Grayscale"/&gt;
  &lt;/Style&gt;
  
  &lt;StackPanel Orientation="Horizontal"&gt;
      &lt;Grid Margin="4"&gt;
          &lt;TextBlock Text="&amp;#xE88F;" Style="{StaticResource SymbolText}" Foreground="OrangeRed"/&gt;
          &lt;TextBlock Text="&amp;#xE76D;" Style="{StaticResource SymbolText}"/&gt;
      &lt;/Grid&gt;
      &lt;Grid Margin="4"&gt;
          &lt;TextBlock Text="&amp;#xF0C6;" Style="{StaticResource SymbolText}" Foreground="LightGreen"/&gt;
          &lt;TextBlock Text="&amp;#xED63;" Style="{StaticResource SymbolText}"/&gt;
      &lt;/Grid&gt;
      &lt;Grid Margin="4"&gt;
          &lt;TextBlock Text="&amp;#xE891;" Style="{StaticResource SymbolText}" Foreground="LightBlue"/&gt;
          &lt;TextBlock Text="&amp;#xE193;" Style="{StaticResource SymbolText}"/&gt;
      &lt;/Grid&gt;
  &lt;/StackPanel&gt;
  </code></pre>
  
  <p>Result:
  <a href="https://i.stack.imgur.com/V3FQi.png" rel="noreferrer"><img src="https://i.stack.imgur.com/V3FQi.png" alt="enter image description here"></a></p>