Remove dashicons.min.css from WordPress

I don’t do a lot of code snippets but I figured someone might find this useful.

What’s Are WordPress Dashicons

dashicons.min.css is a set of icons used in the WordPress admin. Some themes load them on the frontend as well (or maybe it is the default in the WordPress core, I really don’t know).

We often use these icons as part of the admin area when building out custom post types (CPT), adding an icon makes the CPT look unique in the admin menu. WordPress provides a clean icon set and we can usually find one that works well.

However, if you are not taking advantage of these icons on the frontend of the website, then there is no reason to load them anywhere outside the admin/backend.

Why You Might Want to Disable Dashicons

If you’re doing web page speed optimization you know that you should remove unused css and you’ll notice that this CSS file is about 30KB in size, not huge but really no need to load it if you are not using it, right?

Disable Dashicons on the Frontend for Non-Logged In Users Only

When I first removed dashicons.min.css by deregistering the style in my functions.php file, I noticed it broke my WordPress admin bar when logged in as an administrator. Apparently, dashicons on the front of the website do serve a purpose.

Not a huge deal on a site where there is only one administrator but there is a convenience factor here and no one likes to see something that appears broken. So I used the following in functions.php to load it based on user role. You’ll need to adjust the role capability so it works within your site.

// remove dashicons
function wpdocs_dequeue_dashicon() {
	if (current_user_can( 'update_core' )) {
	    return;
	}
	wp_deregister_style('dashicons');
}
add_action( 'wp_enqueue_scripts', 'wpdocs_dequeue_dashicon' );