Skip to content

Administration: Replace Dashicons icon font with @wordpress/icons SVGs in the sidebar navigation #12843

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
faisalahammad wants to merge 11 commits into
base: trunk
Choose a base branch
from
Open

Administration: Replace Dashicons icon font with @wordpress/icons SVGs in the sidebar navigation #12843

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
d21a29b
Merge pull request #2 from WordPress/trunk
faisalahammad Apr 1, 2023
dd727aa
Merge branch 'WordPress:trunk' into trunk
faisalahammad Apr 2, 2023
656240e
Merge branch 'WordPress:trunk' into trunk
faisalahammad Apr 4, 2023
580f43d
Merge branch 'WordPress:trunk' into trunk
faisalahammad Apr 5, 2023
608e3d5
Merge branch 'WordPress:trunk' into trunk
faisalahammad Apr 11, 2023
ffaee64
Merge branch 'WordPress:trunk' into trunk
faisalahammad Jun 24, 2023
df714f0
Merge branch 'WordPress:trunk' into trunk
faisalahammad Jul 22, 2023
69a3788
Merge branch 'WordPress:trunk' into trunk
faisalahammad Nov 2, 2024
1fe9e36
Merge branch 'WordPress:trunk' into trunk
faisalahammad Aug 4, 2026
58ea5ec
Administration: Replace Dashicons with SVG icons in sidebar navigation
faisalahammad Aug 4, 2026
d0fbd37
Administration: Register the new sidebar icons at runtime in Core
faisalahammad Aug 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 49 additions & 18 deletions src/wp-admin/css/admin-menu.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -288,31 +288,55 @@
background-size: 20px auto;
}

#adminmenu div.wp-menu-image.svg-icon {
display: flex;
align-items: center;
justify-content: center;
}

#adminmenu div.wp-menu-image.svg-icon svg {
width: 22px;
height: 22px;
fill: currentColor;
transition: color .1s ease-in-out;
}

div.wp-menu-image:before {
color: #a7aaad;
color: rgba(240, 246, 252, 0.6);
padding: 7px 0;
transition: all .1s ease-in-out;
}

#adminmenu div.wp-menu-image:before {
#adminmenu div.wp-menu-image:before,
#adminmenu div.wp-menu-image.svg-icon svg {
color: #a7aaad;
color: rgba(240, 246, 252, 0.6);
}

#adminmenu li.wp-has-current-submenu:hover div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu:hover div.wp-menu-image.svg-icon svg,
#adminmenu .wp-has-current-submenu div.wp-menu-image:before,
#adminmenu .wp-has-current-submenu div.wp-menu-image.svg-icon svg,
#adminmenu .current div.wp-menu-image:before,
#adminmenu .current div.wp-menu-image.svg-icon svg,
#adminmenu a.wp-has-current-submenu:hover div.wp-menu-image:before,
#adminmenu a.wp-has-current-submenu:hover div.wp-menu-image.svg-icon svg,
#adminmenu a.current:hover div.wp-menu-image:before,
#adminmenu a.current:hover div.wp-menu-image.svg-icon svg,
#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before {
#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image.svg-icon svg,
#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image.svg-icon svg {
color: #fff;
}

#adminmenu li:hover div.wp-menu-image:before,
#adminmenu li:hover div.wp-menu-image.svg-icon svg,
#adminmenu li a:focus div.wp-menu-image:before,
#adminmenu li.opensub div.wp-menu-image:before {
#adminmenu li a:focus div.wp-menu-image.svg-icon svg,
#adminmenu li.opensub div.wp-menu-image:before,
#adminmenu li.opensub div.wp-menu-image.svg-icon svg {
color: #72aee6;
}

Expand All @@ -323,6 +347,10 @@ div.wp-menu-image:before {
z-index: 25;
}

.folded #adminmenu div.wp-menu-image.svg-icon {
height: 34px;
}

.folded #adminmenu a.menu-top {
height: 34px;
}
Expand Down Expand Up @@ -497,6 +525,9 @@ ul#adminmenu > li.current > a.current:after {
}

#collapse-button .collapse-button-icon {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 34px;
}
Expand All @@ -509,29 +540,25 @@ ul#adminmenu > li.current > a.current:after {
display: none;
}

#collapse-button .collapse-button-icon:after {
content: "\f148";
content: "\f148" / '';
display: block;
#collapse-button .collapse-button-icon svg {
width: 22px;
height: 22px;
fill: currentColor;
position: relative;
top: 7px;
text-align: center;
font: normal 20px/1 dashicons !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
top: -1px;
}

/* rtl:ignore */
.folded #collapse-button .collapse-button-icon:after,
.rtl #collapse-button .collapse-button-icon:after {
.folded #collapse-button .collapse-button-icon svg,
.rtl #collapse-button .collapse-button-icon svg {
transform: rotate(180deg);
}

.rtl.folded #collapse-button .collapse-button-icon:after {
.rtl.folded #collapse-button .collapse-button-icon svg {
transform: none;
}

#collapse-button .collapse-button-icon:after,
#collapse-button .collapse-button-icon svg,
#collapse-button .collapse-button-label {
transition: all .1s ease-in-out;
}
Expand Down Expand Up @@ -615,6 +642,10 @@ li#wp-admin-bar-menu-toggle {
z-index: 25;
}

.auto-fold #adminmenu div.wp-menu-image.svg-icon {
height: 34px;
}

.auto-fold #adminmenu a.menu-top {
min-height: 34px;
}
Expand Down Expand Up @@ -656,11 +687,11 @@ li#wp-admin-bar-menu-toggle {
}

/* rtl:ignore */
.auto-fold #collapse-button .collapse-button-icon:after {
.auto-fold #collapse-button .collapse-button-icon svg {
transform: rotate(180deg);
}

.rtl.auto-fold #collapse-button .collapse-button-icon:after {
.rtl.auto-fold #collapse-button .collapse-button-icon svg {
transform: none;
}

Expand Down
17 changes: 14 additions & 3 deletions src/wp-admin/css/colors/_admin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,7 +261,8 @@ input[type="radio"]:focus {
color: variables.$menu-text;
}

#adminmenu div.wp-menu-image:before {
#adminmenu div.wp-menu-image:before,
#adminmenu div.wp-menu-image.svg-icon svg {
color: variables.$menu-icon;
}

Expand All @@ -274,7 +275,9 @@ input[type="radio"]:focus {
}

#adminmenu li.menu-top:hover div.wp-menu-image:before,
#adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
#adminmenu li.menu-top:hover div.wp-menu-image.svg-icon svg,
#adminmenu li.opensub > a.menu-top div.wp-menu-image:before,
#adminmenu li.opensub > a.menu-top div.wp-menu-image.svg-icon svg {
color: variables.$menu-highlight-icon;
}

Expand Down Expand Up @@ -345,13 +348,21 @@ ul#adminmenu > li.current > a.current:after {
}

#adminmenu li.wp-has-current-submenu div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu div.wp-menu-image.svg-icon svg,
#adminmenu a.current:hover div.wp-menu-image:before,
#adminmenu a.current:hover div.wp-menu-image.svg-icon svg,
#adminmenu li.current div.wp-menu-image:before,
#adminmenu li.current div.wp-menu-image.svg-icon svg,
#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image.svg-icon svg,
#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image:before,
#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image.svg-icon svg,
#adminmenu li:hover div.wp-menu-image:before,
#adminmenu li:hover div.wp-menu-image.svg-icon svg,
#adminmenu li a:focus div.wp-menu-image:before,
#adminmenu li.opensub div.wp-menu-image:before {
#adminmenu li a:focus div.wp-menu-image.svg-icon svg,
#adminmenu li.opensub div.wp-menu-image:before,
#adminmenu li.opensub div.wp-menu-image.svg-icon svg {
color: variables.$menu-current-icon;
}

Expand Down
11 changes: 9 additions & 2 deletions src/wp-admin/menu-header.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,8 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {
* If the string 'none' (previously 'div') is passed instead of a URL, don't output
* the default menu image so an icon can be added to div.wp-menu-image as background
* with CSS. Dashicons and base64-encoded data:image/svg_xml URIs are also handled
* as special cases.
* as special cases. Any other value is looked up as a registered icon name and, if
* found, rendered as inline SVG; otherwise it is treated as an image URL.
*/
if ( ! empty( $item[6] ) ) {
$img = '<img src="' . esc_url( $item[6] ) . '" alt="" />';
Expand All @@ -140,6 +141,12 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {
} elseif ( str_starts_with( $item[6], 'dashicons-' ) ) {
$img = '<br />';
$img_class = ' dashicons-before ' . sanitize_html_class( $item[6] );
} else {
$icon = wp_get_icon( $item[6], array( 'size' => 22 ) );
if ( '' !== $icon ) {
$img = $icon;
$img_class = ' svg-icon';
}
}
}

Expand Down Expand Up @@ -283,7 +290,7 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {

echo '<li id="collapse-menu" class="hide-if-no-js">' .
'<button type="button" id="collapse-button" aria-label="' . esc_attr__( 'Collapse Main Menu' ) . '" aria-expanded="true">' .
'<span class="collapse-button-icon" aria-hidden="true"></span>' .
'<span class="collapse-button-icon" aria-hidden="true">' . wp_get_icon( 'core/chevron-left', array( 'size' => 22 ) ) . '</span>' .
'<span class="collapse-button-label">' . __( 'Collapse Menu' ) . '</span>' .
'</button></li>';
}
Expand Down
27 changes: 14 additions & 13 deletions src/wp-admin/menu.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
* @global array $menu
*/

$menu[2] = array( __( 'Dashboard' ), 'read', 'index.php', '', 'menu-top menu-top-first menu-icon-dashboard', 'menu-dashboard', 'dashicons-dashboard' );
$menu[2] = array( __( 'Dashboard' ), 'read', 'index.php', '', 'menu-top menu-top-first menu-icon-dashboard', 'menu-dashboard', 'core/dashboard' );

$submenu['index.php'][0] = array( __( 'Home' ), 'read', 'index.php' );

Expand Down Expand Up @@ -70,7 +70,7 @@

// $menu[5] = Posts.

$menu[10] = array( __( 'Media' ), 'upload_files', 'upload.php', '', 'menu-top menu-icon-media', 'menu-media', 'dashicons-admin-media' );
$menu[10] = array( __( 'Media' ), 'upload_files', 'upload.php', '', 'menu-top menu-icon-media', 'menu-media', 'core/media' );

$submenu['upload.php'][5] = array( _x( 'Library', 'media library menu item' ), 'upload_files', 'upload.php' );
$submenu['upload.php'][10] = array( __( 'Add Media File' ), 'upload_files', 'media-new.php' );
Expand All @@ -86,7 +86,7 @@

unset( $taxonomy, $submenu_index );

$menu[15] = array( __( 'Links' ), 'manage_links', 'link-manager.php', '', 'menu-top menu-icon-links', 'menu-links', 'dashicons-admin-links' );
$menu[15] = array( __( 'Links' ), 'manage_links', 'link-manager.php', '', 'menu-top menu-icon-links', 'menu-links', 'core/link' );

$submenu['link-manager.php'][5] = array( _x( 'All Links', 'admin menu' ), 'manage_links', 'link-manager.php' );
$submenu['link-manager.php'][10] = array( __( 'Add Link' ), 'manage_links', 'link-add.php' );
Expand All @@ -110,7 +110,7 @@
'',
'menu-top menu-icon-comments',
'menu-comments',
'dashicons-admin-comments',
'core/comment',
);

unset( $awaiting_moderation );
Expand Down Expand Up @@ -142,19 +142,20 @@
: ++$_wp_last_object_menu; // If we're to use $_wp_last_object_menu, increment it first.
$post_type_for_id = sanitize_html_class( $post_type );

$menu_icon = 'dashicons-admin-post';
$menu_icon = 'core/post';
if ( is_string( $post_type_obj->menu_icon ) ) {
// Special handling for an empty div.wp-menu-image, data:image/svg+xml, and Dashicons.
// Special handling for an empty div.wp-menu-image, data:image/svg+xml, Dashicons, and registered icons.
if ( 'none' === $post_type_obj->menu_icon || 'div' === $post_type_obj->menu_icon
|| str_starts_with( $post_type_obj->menu_icon, 'data:image/svg+xml;base64,' )
|| str_starts_with( $post_type_obj->menu_icon, 'dashicons-' )
|| WP_Icons_Registry::get_instance()->is_registered( $post_type_obj->menu_icon )
) {
$menu_icon = $post_type_obj->menu_icon;
} else {
$menu_icon = esc_url( $post_type_obj->menu_icon );
}
} elseif ( in_array( $post_type, $builtin, true ) ) {
$menu_icon = 'dashicons-admin-' . $post_type;
$menu_icon = 'core/' . $post_type;
}

$menu_class = 'menu-top menu-icon-' . $post_type_for_id;
Expand Down Expand Up @@ -206,7 +207,7 @@

$appearance_capability = current_user_can( 'switch_themes' ) ? 'switch_themes' : 'edit_theme_options';

$menu[60] = array( __( 'Appearance' ), $appearance_capability, 'themes.php', '', 'menu-top menu-icon-appearance', 'menu-appearance', 'dashicons-admin-appearance' );
$menu[60] = array( __( 'Appearance' ), $appearance_capability, 'themes.php', '', 'menu-top menu-icon-appearance', 'menu-appearance', 'core/brush' );

$count = '';
if ( ! is_multisite() && current_user_can( 'update_themes' ) ) {
Expand Down Expand Up @@ -320,7 +321,7 @@ function _add_plugin_file_editor_to_tools() {
}

/* translators: %s: Number of available plugin updates. */
$menu[65] = array( sprintf( __( 'Plugins %s' ), $count ), 'activate_plugins', 'plugins.php', '', 'menu-top menu-icon-plugins', 'menu-plugins', 'dashicons-admin-plugins' );
$menu[65] = array( sprintf( __( 'Plugins %s' ), $count ), 'activate_plugins', 'plugins.php', '', 'menu-top menu-icon-plugins', 'menu-plugins', 'core/plugins' );

$submenu['plugins.php'][5] = array( __( 'Installed Plugins' ), 'activate_plugins', 'plugins.php' );

Expand All @@ -337,9 +338,9 @@ function _add_plugin_file_editor_to_tools() {
unset( $update_data );

if ( current_user_can( 'list_users' ) ) {
$menu[70] = array( __( 'Users' ), 'list_users', 'users.php', '', 'menu-top menu-icon-users', 'menu-users', 'dashicons-admin-users' );
$menu[70] = array( __( 'Users' ), 'list_users', 'users.php', '', 'menu-top menu-icon-users', 'menu-users', 'core/people' );
} else {
$menu[70] = array( __( 'Profile' ), 'read', 'profile.php', '', 'menu-top menu-icon-users', 'menu-users', 'dashicons-admin-users' );
$menu[70] = array( __( 'Profile' ), 'read', 'profile.php', '', 'menu-top menu-icon-users', 'menu-users', 'core/people' );
}

if ( current_user_can( 'list_users' ) ) {
Expand Down Expand Up @@ -387,7 +388,7 @@ function _add_plugin_file_editor_to_tools() {
);
}

$menu[75] = array( __( 'Tools' ), 'edit_posts', 'tools.php', '', 'menu-top menu-icon-tools', 'menu-tools', 'dashicons-admin-tools' );
$menu[75] = array( __( 'Tools' ), 'edit_posts', 'tools.php', '', 'menu-top menu-icon-tools', 'menu-tools', 'core/tool' );
$submenu['tools.php'][5] = array( __( 'Available Tools' ), 'edit_posts', 'tools.php' );
$submenu['tools.php'][10] = array( __( 'Import' ), 'import', 'import.php' );
$submenu['tools.php'][15] = array( __( 'Export' ), 'export', 'export.php' );
Expand All @@ -402,7 +403,7 @@ function _add_plugin_file_editor_to_tools() {
$submenu['tools.php'][50] = array( __( 'Network Setup' ), 'setup_network', 'network.php' );
}

$menu[80] = array( __( 'Settings' ), 'manage_options', 'options-general.php', '', 'menu-top menu-icon-settings', 'menu-settings', 'dashicons-admin-settings' );
$menu[80] = array( __( 'Settings' ), 'manage_options', 'options-general.php', '', 'menu-top menu-icon-settings', 'menu-settings', 'core/settings' );
$submenu['options-general.php'][10] = array( _x( 'General', 'settings screen' ), 'manage_options', 'options-general.php' );
$submenu['options-general.php'][12] = array( __( 'Connectors' ), 'manage_options', 'options-connectors.php' );
$submenu['options-general.php'][15] = array( __( 'Writing' ), 'manage_options', 'options-writing.php' );
Expand Down
14 changes: 7 additions & 7 deletions src/wp-admin/network/menu.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
}

/* translators: Network menu item. */
$menu[2] = array( __( 'Dashboard' ), 'manage_network', 'index.php', '', 'menu-top menu-top-first menu-icon-dashboard', 'menu-dashboard', 'dashicons-dashboard' );
$menu[2] = array( __( 'Dashboard' ), 'manage_network', 'index.php', '', 'menu-top menu-top-first menu-icon-dashboard', 'menu-dashboard', 'core/dashboard' );

$submenu['index.php'][0] = array( __( 'Home' ), 'read', 'index.php' );

Expand Down Expand Up @@ -57,7 +57,7 @@
$submenu['sites.php'][5] = array( __( 'All Sites' ), 'manage_sites', 'sites.php' );
$submenu['sites.php'][10] = array( __( 'Add Site' ), 'create_sites', 'site-new.php' );

$menu[10] = array( __( 'Users' ), 'manage_network_users', 'users.php', '', 'menu-top menu-icon-users', 'menu-users', 'dashicons-admin-users' );
$menu[10] = array( __( 'Users' ), 'manage_network_users', 'users.php', '', 'menu-top menu-icon-users', 'menu-users', 'core/people' );
$submenu['users.php'][5] = array( __( 'All Users' ), 'manage_network_users', 'users.php' );
$submenu['users.php'][10] = array( __( 'Add User' ), 'create_users', 'user-new.php' );

Expand All @@ -77,10 +77,10 @@
'',
'menu-top menu-icon-appearance',
'menu-appearance',
'dashicons-admin-appearance',
'core/brush',
);
} else {
$menu[15] = array( __( 'Themes' ), 'manage_network_themes', 'themes.php', '', 'menu-top menu-icon-appearance', 'menu-appearance', 'dashicons-admin-appearance' );
$menu[15] = array( __( 'Themes' ), 'manage_network_themes', 'themes.php', '', 'menu-top menu-icon-appearance', 'menu-appearance', 'core/brush' );
}
$submenu['themes.php'][5] = array( __( 'Installed Themes' ), 'manage_network_themes', 'themes.php' );
$submenu['themes.php'][10] = array( __( 'Add Theme' ), 'install_themes', 'theme-install.php' );
Expand All @@ -102,16 +102,16 @@
'',
'menu-top menu-icon-plugins',
'menu-plugins',
'dashicons-admin-plugins',
'core/plugins',
);
} else {
$menu[20] = array( __( 'Plugins' ), 'manage_network_plugins', 'plugins.php', '', 'menu-top menu-icon-plugins', 'menu-plugins', 'dashicons-admin-plugins' );
$menu[20] = array( __( 'Plugins' ), 'manage_network_plugins', 'plugins.php', '', 'menu-top menu-icon-plugins', 'menu-plugins', 'core/plugins' );
}
$submenu['plugins.php'][5] = array( __( 'Installed Plugins' ), 'manage_network_plugins', 'plugins.php' );
$submenu['plugins.php'][10] = array( __( 'Add Plugin' ), 'install_plugins', 'plugin-install.php' );
$submenu['plugins.php'][15] = array( __( 'Plugin File Editor' ), 'edit_plugins', 'plugin-editor.php' );

$menu[25] = array( __( 'Settings' ), 'manage_network_options', 'settings.php', '', 'menu-top menu-icon-settings', 'menu-settings', 'dashicons-admin-settings' );
$menu[25] = array( __( 'Settings' ), 'manage_network_options', 'settings.php', '', 'menu-top menu-icon-settings', 'menu-settings', 'core/settings' );
if ( defined( 'MULTISITE' ) && defined( 'WP_ALLOW_MULTISITE' ) && WP_ALLOW_MULTISITE ) {
$submenu['settings.php'][5] = array( __( 'Network Settings' ), 'manage_network_options', 'settings.php' );
$submenu['settings.php'][10] = array( __( 'Network Setup' ), 'setup_network', 'setup.php' );
Expand Down
Loading
Loading