Add Material Design Icons to your Umbraco website with this easy to use data-type.

Material icons is used for many of our Umbraco based sites. After a lot of copy and pasting of mdi-* classes into view markup, we developed a custom data-type to do this tedious "icon-to-class" selection via a user friendly back office extension for Umbraco.

This data-type extends the Umbraco back office to give you the following inline functionality:

• Easy to use icon browser
• Reactive text based icon search
• Top 20 icon matches shown
• Icon reset switch
• Toggle browse button

Umbraco Material Design Icons can be installed via Nuget:

Install-Package Mooce.UmbracoMdiIcons

Alternatively, you can download the project source and copy the contents of /src/App_Plugins to the /App_Plugins directory of your Umbraco based project.

Once installed, navigate to the Developer section of Umbraco's back office. Create a custom data type, and select Mooce.MdiIconPicker from the list of availbe data-types. Once created, your new Mooce.MdiIconPicker data-type will be available for use when creating or updating Document Types.

Ensure the Material Design Icons (version 2.5.94) CSS is linked in your project template(s):

<link rel="stylesheet" href="//cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css">

The Mooce.MdiIconPicker data-type stores data as a string. Using the data-type is in your view markup is as simple as this:

<i class="mdi @(Model.Content.MyIcon)"></i>