Skip to content

Admin: replace dashicons in admin bar and sidebar with @wordpress/icons #12270

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

Closed
fushar wants to merge 35 commits into from
+1,270 −250
Closed

Admin: replace dashicons in admin bar and sidebar with @wordpress/icons #12270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
2e8ad54
Admin: replace dashicons in admin bar and sidebar with @wordpress/icons
fushar Jun 23, 2026
dd1533b
Use the new core-admin/ icon collection
fushar Sep 22, 2026
ca70fe4
Simplify CSS by setting the color to the div
fushar Sep 28, 2026
2cecbcb
Address comments
fushar Sep 28, 2026
d2ebd38
Revert icon conditional rendering in site name node so that live upda…
fushar Sep 28, 2026
159d96b
Document registered icon names as valid menu icon values
t-hamano Oct 4, 2026
028c1af
Restore page-specific menu icon fallback when menu_icon is not a string
t-hamano Oct 4, 2026
b50bbdd
Remove more CSS
fushar Oct 7, 2026
de311e6
Resize mobile icon size to 32px
fushar Oct 8, 2026
197b720
Keep Dashicons menu_icon for built-in post types
fushar Oct 8, 2026
84802ec
Scope to .ab-icon.svg-icon svg
fushar Oct 8, 2026
eb4356e
Use svg icons in wp-admin/user/menu.php as well
fushar Oct 8, 2026
5322e20
Build default blavatar once
fushar Oct 8, 2026
c0e068f
Extract is_admin() || ! current_user_can( 'read' )
fushar Oct 8, 2026
74b4407
Fix avatar fallback svg icon on mobile
fushar Oct 8, 2026
155b556
Restore deleted blavatar rule on mobile
fushar Oct 8, 2026
12ce509
Don't call is_registered() when checking icon
fushar Oct 8, 2026
bcfdb29
Render empty icon wrapper when not found
fushar Oct 8, 2026
a75644e
Add icon argument in add_node
fushar Oct 8, 2026
f2f1ae0
Revert "Restore deleted blavatar rule on mobile"
fushar Oct 8, 2026
72d8005
Keep dashicons in menu array, add helper, and call _doing_it_wrong if…
fushar Oct 8, 2026
f74c526
Guard admin bar SVG icons from third-party styles
fushar Oct 9, 2026
2bc190f
Don't just add .svg-icon to existing rules just to win specificity
fushar Oct 9, 2026
094bbe8
Better dashicon mapping code which emphasize backompat
fushar Oct 9, 2026
47976e7
Apply backcompat
fushar Oct 10, 2026
85988fa
Remove unused backcompat code
fushar Oct 12, 2026
15cb2ce
Update the SVG color override's handle to admin-menu instead
fushar Oct 12, 2026
8e764b0
Also color inline SVG icons during live preview
fushar Oct 13, 2026
e6cb1da
Fall back sidebar menu icon to text color when $icons is not passed
fushar Oct 13, 2026
1ffe5dd
wp_is_icon_name -> wp_is_valid_icon_name
fushar Oct 13, 2026
fc08a7f
Address Aki's comments
fushar Oct 14, 2026
6c3fc8b
Flip search icon on LTR
fushar Oct 14, 2026
cbdea15
Update docblock examples to use core-admin/ instead
fushar Oct 16, 2026
0c05463
Strip empty span for all core nodes
fushar Oct 16, 2026
fa3caad
Merge remote-tracking branch 'upstream/trunk' into admin-wp-icons
fushar Oct 19, 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
17 changes: 16 additions & 1 deletion src/js/_enqueues/admin/user-profile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -493,7 +493,7 @@
} );

$( function() {
var $colorpicker, $stylesheet, user_id, current_user_id,
var $colorpicker, $stylesheet, $selectedMenuIconStyles, initialMenuIconStyles, user_id, current_user_id,
select = $( '#display_name' ),
username = $( '#user_login' ).val(),
myAccount = $( '#wp-admin-bar-my-account' ),
Expand Down Expand Up @@ -564,6 +564,8 @@

$colorpicker = $( '#color-picker' );
$stylesheet = $( '#colors-css' );
$selectedMenuIconStyles = $();
initialMenuIconStyles = $colorpicker.find( '.selected .menu_icon_styles' ).val();
user_id = $( 'input#user_id' ).val();
current_user_id = $( 'input[name="checkuser_id"]' ).val();

Expand Down Expand Up @@ -599,6 +601,19 @@
}
}

// Color the inline SVG menu icons.
if ( 0 === $selectedMenuIconStyles.length ) {
// Remove the color scheme styles that were already printed.
if ( initialMenuIconStyles ) {
$( 'style' ).each( function() {
this.textContent = this.textContent.replace( initialMenuIconStyles, '' );
} );
}
// Insert before the colors stylesheet, so that the stylesheet can override these styles.
$selectedMenuIconStyles = $( '<style />' ).insertBefore( $stylesheet );
}
$selectedMenuIconStyles.text( $this.children( '.menu_icon_styles' ).val() || '' );

// Update user option.
$.post( ajaxurl, {
action: 'save-user-color-scheme',
Expand Down
96 changes: 57 additions & 39 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 @@ -280,31 +280,51 @@
background-size: 20px auto;
}

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

/* Dashicons back-compat: allow `::before` with `content` to fill the slot and push the SVG icon out of view. */
#adminmenu div.wp-menu-image.svg-icon::before {
flex: 0 0 100%;
}

#adminmenu div.wp-menu-image.svg-icon svg {
flex: none;
margin: auto;
fill: currentColor;
}

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

#adminmenu div.wp-menu-image::before {
#adminmenu div.wp-menu-image {
color: #a7aaad;
color: rgba(240, 246, 252, 0.6);
transition: color 0.1s ease-in-out;
}

#adminmenu li.wp-has-current-submenu:hover div.wp-menu-image::before,
#adminmenu .wp-has-current-submenu div.wp-menu-image::before,
#adminmenu .current div.wp-menu-image::before,
#adminmenu a.wp-has-current-submenu:hover div.wp-menu-image::before,
#adminmenu a.current:hover div.wp-menu-image::before,
#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 div.wp-menu-image::before {
Comment thread
fushar marked this conversation as resolved.
color: inherit;
}

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

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

Expand All @@ -315,6 +335,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 @@ -492,35 +516,32 @@ ul#adminmenu > li.current > a.current::after {
#collapse-button .collapse-button-icon {
width: 36px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
}

.folded #collapse-button .collapse-button-label {
display: none;
}

#collapse-button .collapse-button-icon::after {
content: "\f148";
content: "\f148" / "";
display: block;
#collapse-button .collapse-button-icon svg {
fill: currentColor;
position: relative;
top: 7px;
text-align: center;
font: 400 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 0.1s ease-in-out;
}
Expand Down Expand Up @@ -600,6 +621,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 @@ -641,11 +666,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 Expand Up @@ -806,26 +831,19 @@ li#wp-admin-bar-menu-toggle {
border: 1px solid transparent;
}

#wpadminbar #wp-admin-bar-menu-toggle .ab-icon::before {
content: "\f228";
display: inline-block;
#wpadminbar #wp-admin-bar-menu-toggle .ab-icon {
display: flex;
align-items: center;
float: left;
font: 400 40px/45px dashicons;
vertical-align: middle;
outline: none;
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 44px;
width: 50px;
padding: 0;
border: none;
text-align: center;
text-decoration: none;
box-sizing: border-box;
}

.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon::before {
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon {
color: #72aee6;
}
}
Expand Down
49 changes: 21 additions & 28 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 @@ -260,7 +260,7 @@ input[type="radio"]:focus {
color: variables.$menu-text;
}

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

Expand All @@ -272,8 +272,8 @@ input[type="radio"]:focus {
background-color: variables.$menu-highlight-background;
}

#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,
#adminmenu li.opensub > a.menu-top div.wp-menu-image {
color: variables.$menu-highlight-icon;
}

Expand Down Expand Up @@ -342,14 +342,14 @@ ul#adminmenu > li.current > a.current::after {
background: variables.$menu-current-background;
}

#adminmenu li.wp-has-current-submenu div.wp-menu-image::before,
#adminmenu a.current:hover div.wp-menu-image::before,
#adminmenu li.current div.wp-menu-image::before,
#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:hover div.wp-menu-image::before,
#adminmenu li a:focus div.wp-menu-image::before,
#adminmenu li.opensub div.wp-menu-image::before {
#adminmenu li.wp-has-current-submenu div.wp-menu-image,
#adminmenu a.current:hover div.wp-menu-image,
#adminmenu li.current div.wp-menu-image,
#adminmenu li.wp-has-current-submenu a:focus div.wp-menu-image,
#adminmenu li.wp-has-current-submenu.opensub div.wp-menu-image,
#adminmenu li:hover div.wp-menu-image,
#adminmenu li a:focus div.wp-menu-image,
#adminmenu li.opensub div.wp-menu-image {
color: variables.$menu-current-icon;
}

Expand Down Expand Up @@ -397,7 +397,6 @@ ul#adminmenu > li.current > a.current::after {
}

#wpadminbar .ab-icon,
#wpadminbar .ab-icon::before,
#wpadminbar .ab-item::before,
#wpadminbar .ab-item::after {
color: variables.$menu-icon;
Expand All @@ -418,10 +417,9 @@ ul#adminmenu > li.current > a.current::after {
color: variables.$menu-submenu-focus-text;
}

#wpadminbar:not(.mobile) li:hover .ab-icon::before,
#wpadminbar:not(.mobile) li:hover .ab-icon,
#wpadminbar:not(.mobile) li:hover .ab-item::before,
#wpadminbar:not(.mobile) li:hover .ab-item::after,
#wpadminbar:not(.mobile) li:hover #adminbarsearch::before {
#wpadminbar:not(.mobile) li:hover .ab-item::after {
color: variables.$menu-submenu-focus-text;
}

Expand Down Expand Up @@ -457,38 +455,33 @@ ul#adminmenu > li.current > a.current::after {
#wpadminbar .quicklinks .menupop.hover ul li a:focus,
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover,
#wpadminbar.nojs .quicklinks .menupop:hover ul li a:focus,
#wpadminbar li:hover .ab-icon::before,
#wpadminbar li:hover .ab-icon,
#wpadminbar li:hover .ab-item::before,
#wpadminbar li a:focus .ab-icon::before,
#wpadminbar li a:focus .ab-icon,
#wpadminbar li .ab-item:focus::before,
#wpadminbar li .ab-item:focus .ab-icon::before,
#wpadminbar li.hover .ab-icon::before,
#wpadminbar li .ab-item:focus .ab-icon,
#wpadminbar li.hover .ab-icon,
#wpadminbar li.hover .ab-item::before,
#wpadminbar li:hover #adminbarsearch::before,
#wpadminbar li #adminbarsearch.adminbar-focused::before {
#wpadminbar li #adminbarsearch.adminbar-focused .ab-icon {
color: variables.$menu-submenu-focus-text;
}

#wpadminbar .quicklinks li a:hover .blavatar,
#wpadminbar .quicklinks li a:focus .blavatar,
#wpadminbar .quicklinks .ab-sub-wrapper .menupop.hover > a .blavatar,
#wpadminbar .menupop .menupop > .ab-item:hover::before,
#wpadminbar.mobile .quicklinks .hover .ab-icon::before,
#wpadminbar.mobile .quicklinks .hover .ab-icon,
#wpadminbar.mobile .quicklinks .hover .ab-item::before {
color: variables.$menu-submenu-focus-text;
}

#wpadminbar.mobile .quicklinks .ab-icon::before,
#wpadminbar.mobile .quicklinks .ab-icon,
#wpadminbar.mobile .quicklinks .ab-item::before {
color: variables.$menu-icon;
}

/* Admin Bar: search */

#wpadminbar #adminbarsearch::before {
color: variables.$menu-icon;
}

#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
color: variables.$menu-text;
background: variables.$adminbar-input-background;
Expand Down Expand Up @@ -651,7 +644,7 @@ div#wp-responsive-toggle a::before {
background: variables.$menu-submenu-background;
}

.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon::before {
.wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon {
color: variables.$menu-icon;
}

Expand Down
1 change: 1 addition & 0 deletions src/wp-admin/includes/admin-filters.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
// Admin color schemes.
add_action( 'admin_init', 'register_admin_color_schemes', 1 );
add_action( 'admin_head', 'wp_color_scheme_settings' );
add_action( 'admin_enqueue_scripts', 'wp_color_scheme_menu_icon_styles' );
add_action( 'admin_color_scheme_picker', 'admin_color_scheme_picker' );

// Misc hooks.
Expand Down
Loading
Loading