With the release of WordPress 3.6 (currently still RC) it is clear, that there are no big changes within the WordPress admin interface.

Even though the admin UI didn’t change, there is an unknown plugin called MP6, which a lot of us are already using. (Even the official wordpress.com is using it already as you can read here: The WordPress.com Dashboard Gets a Beautiful Makeover)

And even though this is not the interface of the current version, it’s definitely the future of the WordPress admin interface (they are already aiming to include MP6 in WordPress 3.7 core)!

But why is this so amazing?
The new UI is responsive and comes with its own flat vector icon font for the admin UI:

WordPress MP6 Dashicons

WordPress MP6 Dashicons

You can get the latest version of the font/plugin from GitHub or the WP Plugin Directory:

DownloadGitHub Dashicons
» https://github.com/melchoyce/dashicons/archive/master.zip (ca. 97KB)
WordPress MP6 Plugin
» http://downloads.wordpress.org/plugin/mp6.zip (ca. 306KB)

 

Custom Dashicons

Using custom post type icons is now getting tricky as these post types usually come along with their own menu page. But using add_menu_page() icons will be tricky in general as we do no longer know, wether or not the interface has a light or a dark background and if there are pixel or vector icons.

Changing the color of the background might not seem to be a big deal, but a lot of (pixel) icons are not designed to work on light and dark backgrounds. So let’s play it safe and do it properly:

Building an Iconfont

Edit Dashicons on http://icomoon.io/app/ Upload the SVG version of your icon e.g. at the IcoMoon web app. Keep in mind that the other dashicons have a width of 34px and a height of 30px (so better stick to this width-to-height ratio and keep the UI consistent!).

After the upload you’ll still be able to edit and rename the icons. Select all of your icons (you can use Shift + Click to select) and scroll down to the bottom of the page to generate your new vector iconfont (even if it’s only one icon). Make sure to fill in the meta information on the next page and toggle the button to base64 encode and embed the font within the CSS (this will save you another extra HTTP request to load the font).

 

Using the Iconfont

Download the font and put the CSS and font files in the appropriate folder of your current theme.

Pro: You’ll be able to re-upload the SVG files (at IcoMoon) at any time to edit/extend your font!

The first part of your CSS will look something like this:

Next you can embed your custom icons. Use the ID #menu-posts-{post_type} of your custom post type as a selector to override the MP6 defaults (…yes, sadly we’re forced to use !important to override the MP6 defaults):

Including it this way will adapt the rest of the default MP6 styles (like size, color, hover and active states…) while simply adding some further icons.

Enqueuing the Iconfont

Finally add this PHP snippet to your themes functions.php to register and enqueue (WP admin only!) your CSS file:

Let’s go through this step by step, so you’ll get an idea what the hell we are doing here: as soon as the MP6 plugin is active within WP admin, we’re going the register and enqueue the CSS, again only for the admin area! As long as we’re doing this only for WP admin, it will not affect (e.g. speed down,…) the rest of the site!

Pro: Neither is_plugin_active(), nor admin_enqueue_scripts is designed for the use outside of WP admin!

RESULT: This technique will ensure that custom admin icons within the WordPress admin UI will be updated, too, if the UI is adjusted with MP6.

UPDATE: As Shea pointed out on WPSE, it is more future-proof to use get_user_option():

If something changes in the MP6 plugin or it gets moved into core, as long as the pre_get_user_option filter is still in place (which it would be, to maintain backwards compat), the code will still work. Nobody’s going to fake an active plugin when MP6 is moved to core.
— via Shea, WPSE #loopchat

Thank you for this great hint! :)


Update

With the release of WordPres 3.8 there is no urgent need to look for the MP6 plugin. We can register and enqueue (again WP admin only!) the CSS file as usual:

 

Info

Everybody who is just looking for a way to add another dashicon than the default should take a closer look at the available filters and arguments (e.g. ‘menu_icon’ for custom post types…)