WordPress Usage
Admin menu items can be added with register_post_type()
and add_menu_page()
, which both have an option to set an icon. To show the current icon, you should pass in 'dashicons-{icon}'
.
Examples
In register_post_type()
, set menu_icon
in the arguments array.
<?php
/**
* Register the Product post type with a Dashicon.
*
* @see register_post_type()
*/
function wpdocs_create_post_type() {
register_post_type( 'acme_product',
array(
'labels' => array(
'name' => __( 'Products', 'textdomain' ),
'singular_name' => __( 'Product', 'textdomain' )
),
'public' => true,
'has_archive' => true,
'menu_icon' => 'dashicons-products',
)
);
}
add_action( 'init', 'wpdocs_create_post_type', 0 );
The function add_menu_page()
accepts a parameter after the callback function for an icon URL, which can also accept a dashicons class.
<?php
/**
* Register a menu page with a Dashicon.
*
* @see add_menu_page()
*/
function wpdocs_add_my_custom_menu() {
// Add an item to the menu.
add_menu_page(
__( 'My Page', 'textdomain' ),
__( 'My Title', 'textdomain' ),
'manage_options',
'my-page',
'my_admin_page_function',
'dashicons-admin-media'
);
}
CSS/HTML Usage
If you want to use dashicons in the admin outside of the menu, there are two helper classes you can use. These are dashicons-before
and dashicons
, and they can be thought of as setting up dashicons (since you still need your icon’s class, too).
Examples
Adding an icon to a header, with the dashicons-before
class. This can be added right to the element with text.
<h2 class="dashicons-before dashicons-smiley">A Cheerful Headline</h2>
Adding an icon to a header, with the dashicons
class. Note that here, you need extra markup specifically for the icon.
<h2><span class="dashicons dashicons-smiley"></span> A Cheerful Headline</h2>
Block Usage
The block editor supports use of dashicons as block icons and as its own component.
Examples
Adding an icon to a block. The registerBlockType
function accepts a parameter “icon” which accepts the name of a dashicon. The provided example is truncated. See the full example in the Block Editor Handbook.
registerBlockType( 'gutenberg-examples/example-01-basic-esnext', {
apiVersion: 2,
title: 'Example: Basic (esnext)',
icon: 'universal-access-alt',
category: 'design',
example: {},
edit() {},
save() {},
} );
Using an icon as a component. A dedicated Dashicon
component is available. See the related documentation in the Block Editor Handbook.
import { Dashicon } from '@wordpress/components';
const MyDashicon = () => (
<div>
<Dashicon icon="admin-home" />
<Dashicon icon="products" />
<Dashicon icon="wordpress" />
</div>
);
Photoshop Usage
Use the .OTF version of the font for Photoshop mockups, the web-font versions won’t work. For most accurate results, pick the “Sharp” font smoothing.