You can add Material Design icons to Turnkey controls and to WPF user interfaces; use this page when you need the icon name, glyph code, or WPF name-to-glyph resolver.

Choose the integration that matches your UI

Material icons are supplied differently in Turnkey and WPF.

UI	Use this when	Provide
Turnkey control	You are adding an icon to an action or input control.	The Material icon name, such as arrow_back, in the Icon tagged value.
Turnkey HTML-rendered value	You need to render an arbitrary Material icon in HTML.	A Material glyph code, such as , inside an HTML i element.
WPF	You are building a WPF application that uses the included Material Icons font.	The font resource and either a glyph character or a resolver that converts an icon name to that character.

Turnkey

Turnkey has built-in support for the Material Design icon pack. For standard controls, use the icon's name rather than HTML.

Add an icon to an action or input

1. In MDriven Designer, select the ViewModel column that represents the action or input.
2. Add the tagged value Icon.
3. Set its value to the Material icon name.
4. Optionally add IconPosition with the value before or after. The default position is before.

For example, to show a back-arrow icon, set Icon to arrow_back. Use lowercase names with underscores. An icon displayed as “Arrow back” on the icon site is therefore normally entered as arrow_back.

Use the Material icon catalog at Material Symbols & Icons to find an icon. Copy the icon name for a tagged value. Action Controls describes icons on buttons, and Input Controls describes icons on input controls.

Render an arbitrary icon as HTML

If a ViewModel value is rendered as HTML, set DataIsHtml and return an icon element containing the glyph code:

<i class="material-icons">&#xe9ba;</i>

Copy the glyph code from the Material icon catalog. The code has the form .

This approach is for content that is deliberately rendered as HTML. For buttons and inputs, prefer the Icon tagged value so that Turnkey renders the icon as part of the control.

WPF

The WECPOFLogic assembly includes these Material Icons resources:

• MaterialIcons-Regular.ttf, added as a Resource.
• MaterialIcons-Regular.codepoints, added as an Embedded Resource.

The .codepoints file maps Material icon names to hexadecimal character codes. Define the font once in your WPF application's resources, then use it wherever an icon glyph is displayed.

Define the font resource

Add this font family to your application's App.Resources:

<FontFamily x:Key="materialdesigniconsfont">pack://application:,,,/WECPOFLogic;component/Fonts/#Material Icons</FontFamily>

You can then apply it in XAML with FontFamily="{StaticResource materialdesigniconsfont}". The displayed text must be the character for the required icon, using the code listed in MaterialIcons-Regular.codepoints.

Resolve icon names in ViewModelWPFUserControl

Using Material Design in WPF can use a named icon when you configure ViewModelWPFUserControl with the font resource name and an icon-name resolver. Install both hooks during application setup, before controls need to resolve icons:

Eco.ViewModel.WPF.ViewModelWPFUserControl.IconFontFamilyResourceName = "materialdesigniconsfont";
Eco.ViewModel.WPF.ViewModelWPFUserControl.IconFontIconNameResolverInstall(IconNameResolver);

The resolver receives an icon name and must return the matching one-character string. The following example reads the embedded MaterialIcons-Regular.codepoints resource on its first use and caches the mappings. Replace WECPOFTabBased with a type from the assembly that contains the embedded resource.

public static Dictionary<string, string> IconNameToValueDict
{
  get;
  private set;
}

public static string IconNameResolver(string name)
{
  if (IconNameToValueDict == null)
  {
    IconNameToValueDict = new Dictionary<string, string>();

    var assembly = typeof(WECPOFTabBased).Assembly;
    var resourceName = assembly.GetName().Name +
      ".Fonts.MaterialIcons-Regular.codepoints";
    var stream = assembly.GetManifestResourceStream(resourceName);

    using (var sr = new System.IO.StreamReader(
      stream, System.Text.Encoding.UTF8))
    {
      string content = sr.ReadToEnd();
      var lines = content.Split('\n');

      foreach (var line in lines)
      {
        var parts = line.Split(' ');
        if (parts.Length == 2 && !IconNameToValueDict.ContainsKey(parts[0]))
        {
          var character = (char)int.Parse(
            parts[1],
            System.Globalization.NumberStyles.HexNumber);
          IconNameToValueDict.Add(parts[0], character.ToString());
        }
      }
    }
  }

  if (IconNameToValueDict.TryGetValue(name, out var value))
    return value;

  return "\ue87e";
}

If an icon does not render in WPF, check these items:

1. The FontFamily resource key is exactly materialdesigniconsfont, or matches the value assigned to IconFontFamilyResourceName.
2. The font's pack URI points to WECPOFLogic and the font family is Material Icons.
3. The codepoints file is embedded in the assembly from which the resolver loads it.
4. The requested name exists in MaterialIcons-Regular.codepoints.

See also

• Documentation:Action Controls
• Documentation:Input Controls
• Documentation:MDriven Stylesheet
• Documentation:Turnkey Styling
• Documentation:Wpf materialdesign
• Documentation:UI&Styling