Add new Document Type icons to Umbraco 7

The process for adding new document type icons is a little more complicated in Umbraco 7.

Document type icons are now displayed as fonts (svg/woff/eot files), the icon sets are created using Icomoon.io.

To add new icons you have to create a new set, these can then be included in Umbraco by created a new plugin.

Step 1 - Create new icon set

Go to https://icomoon.io/app, here you can load in icons from other available sets or create your own.

Select any icons you want to include in your new set.

Next, click on the "Font" button at the bottom.

In the next screen:

You'll see a list of the selected icons, take note of the values below each icon, these "code points" are used in CSS to locate each icon in the final file.

Click download and unzip.

Step 2 - Add to Umbraco

To include the new icons in Umbraoo, you have to create a new plugin to load in CSS which references the font files.

Create a new folder in "App_Plugins" for your plugin, in here create a new "package.manifest" and CSS file, next copy in the downloaded font files.

My package is called "IcoElegant", here's my layout:

Package Manifest

{
    css: [
        '~/App_Plugins/NewIcons/css/icoelegant.css'
 ]
}

Change this to reference your CSS file.

CSS

@font-face {
    font-family: 'icoelegant';
    src:url('../Fonts/icoelegant.eot');
    src:url('../Fonts/icoelegant.eot?#iefix') format('embedded-opentype'),
    url('../Fonts/icoelegant.svg') format('svg'),
    url('../Fonts/icoelegant.woff') format('woff'),
    url('../Fonts/icoelegant.ttf') format('truetype');
}


[class^="icon-icoelegant-"], [class*=" icon-icoelegant-"] {font-family:'icoelegant';width:auto;height:auto;}
.icon-icoelegant-mobile:before{content:'\e000'}
.icon-icoelegant-laptop:before{content:'\e001'}
.icon-icoelegant-desktop:before{content:'\e002'}
.icon-icoelegant-tablet:before{content:'\e003'}
.icon-icoelegant-phone:before{content:'\e004'}
.icon-icoelegant-document:before{content:'\e005'}
.icon-icoelegant-documents:before{content:'\e006'}
.icon-icoelegant-search:before{content:'\e007'}
.icon-icoelegant-clipboard:before{content:'\e008'}
.icon-icoelegant-newspaper:before{content:'\e009'}
.icon-icoelegant-notebook:before{content:'\e00a'}
.icon-icoelegant-book-open:before{content:'\e00b'}
.icon-icoelegant-browser:before{content:'\e00c'}
.icon-icoelegant-calendar:before{content:'\e00d'}
.icon-icoelegant-presentation:before{content:'\e00e'}

Change the font-family name and src attributes to match your font files.

Each icon needs a prefix (starting with ".icon"), you'll also have to swap the content value for the "code point" value when exporting from Icomoon.

Save the files and refresh Umbraco, you may have to clear the ClientDependency cache "\App_Data\TEMP\ClientDependency" first, the new icons should now be available in the Document Type section of Umbraco.