var _wpColorScheme = ' . wp_json_encode( array( 'icons' => $icon_colors ), JSON_HEX_TAG | JSON_UNESCAPED_SLASHES ) . ";\n";
}
+/**
+ * Colors inline SVG admin menu icons with the icon colors of the current admin color scheme.
+ *
+ * These are the colors a scheme registers through the `$icons` argument of
+ * wp_admin_css_color(). svg-painter.js applies the same colors to menu icons
+ * given as base64-encoded SVG; this does it for inline SVG icons, with CSS.
+ *
+ * The rules are printed before the stylesheet of the scheme, so a scheme
+ * that colors the icon element itself overrides them.
+ *
+ * @since 7.2.0
+ *
+ * @see wp_color_scheme_settings()
+ */
+function wp_color_scheme_menu_icon_styles() {
+ $styles = _wp_get_color_scheme_menu_icon_styles( get_user_option( 'admin_color' ) );
+
+ if ( '' !== $styles ) {
+ wp_add_inline_style( 'admin-menu', $styles );
+ }
+}
+
+/**
+ * Returns the CSS that colors inline SVG admin menu icons with the icon colors of an admin color scheme.
+ *
+ * A scheme without icon colors gets CSS that makes the icons follow the
+ * text color of the menu links instead.
+ *
+ * The color scheme picker also passes it to user-profile.js, which applies
+ * it when another scheme is selected.
+ *
+ * @since 7.2.0
+ * @access private
+ *
+ * @global array $_wp_admin_css_colors
+ *
+ * @param string $color_scheme The name of the color scheme.
+ * @return string The CSS, or an empty string if the scheme needs none.
+ */
+function _wp_get_color_scheme_menu_icon_styles( $color_scheme ) {
+ global $_wp_admin_css_colors;
+
+ if ( empty( $_wp_admin_css_colors[ $color_scheme ] ) ) {
+ return '';
+ }
+
+ // The core schemes have no stylesheet of their own, or one from the core colors directory.
+ $url = $_wp_admin_css_colors[ $color_scheme ]->url;
+ if ( ! is_string( $url ) || '' === $url || str_starts_with( $url, admin_url( 'css/colors/' ) ) ) {
+ return '';
+ }
+
+ $base_selector = '#adminmenu div.wp-menu-image';
+ $focus_selector = '#adminmenu li:hover div.wp-menu-image,#adminmenu li a:focus div.wp-menu-image,#adminmenu li.opensub div.wp-menu-image';
+ $current_selector = '#adminmenu li.wp-has-current-submenu div.wp-menu-image,#adminmenu li.wp-has-current-submenu:hover 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.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';
+
+ $icon_colors = array_map( 'sanitize_hex_color', wp_parse_args( (array) $_wp_admin_css_colors[ $color_scheme ]->icon_colors, array_fill_keys( array( 'base', 'focus', 'current' ), '' ) ) );
+
+ // Without icon colors, the icons follow the text color that the scheme gives to the menu links.
+ if ( ! $icon_colors['base'] || ! $icon_colors['focus'] || ! $icon_colors['current'] ) {
+ return "$base_selector,$focus_selector,$current_selector{color:inherit}";
+ }
+
+ return "$base_selector{color:{$icon_colors['base']}}" .
+ "$focus_selector{color:{$icon_colors['focus']}}" .
+ "$current_selector{color:{$icon_colors['current']}}";
+}
+
/**
* Displays the viewport meta in the admin.
*
diff --git a/src/wp-admin/includes/plugin.php b/src/wp-admin/includes/plugin.php
index c655ef21c27c6..c9830eb1a947e 100644
--- a/src/wp-admin/includes/plugin.php
+++ b/src/wp-admin/includes/plugin.php
@@ -1396,6 +1396,8 @@ function uninstall_plugin( $plugin ) {
* the color scheme. This should begin with 'data:image/svg+xml;base64,'.
* * Pass the name of a Dashicons helper class to use a font icon,
* e.g. 'dashicons-chart-pie'.
+ * * Pass the namespaced name of a registered icon to render it as an inline SVG,
+ * e.g. 'core-admin/pin'.
* * Pass 'none' to leave div.wp-menu-image empty so an icon can be added via CSS.
* @param int|float $position Optional. The position in the menu order this item should appear.
* @return string The resulting page's hook_suffix.
diff --git a/src/wp-admin/menu-header.php b/src/wp-admin/menu-header.php
index 27f557531808e..fe4cd28bfc9fb 100644
--- a/src/wp-admin/menu-header.php
+++ b/src/wp-admin/menu-header.php
@@ -73,6 +73,26 @@
function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {
global $self, $parent_file, $submenu_file, $plugin_page, $typenow;
+ /*
+ * Dashicons back-compat: the `$menu` global keeps the Dashicons values of the core
+ * menu items. Those Dashicons are only mapped to their replacement icons here, when
+ * the menu is rendered.
+ */
+ $dashicon_replacements = array(
+ 'dashicons-dashboard' => 'core-admin/dashboard',
+ 'dashicons-admin-post' => 'core-admin/pin',
+ 'dashicons-admin-media' => 'core-admin/media',
+ 'dashicons-admin-links' => 'core-admin/link',
+ 'dashicons-admin-page' => 'core-admin/page',
+ 'dashicons-admin-comments' => 'core-admin/comment',
+ 'dashicons-admin-appearance' => 'core-admin/brush',
+ 'dashicons-admin-plugins' => 'core-admin/plugins',
+ 'dashicons-admin-users' => 'core-admin/people',
+ 'dashicons-admin-tools' => 'core-admin/tool',
+ 'dashicons-admin-settings' => 'core-admin/settings',
+ 'dashicons-admin-multisite' => 'core-admin/sites',
+ );
+
$first = true;
// 0 = menu_title, 1 = capability, 2 = menu_slug, 3 = page_title, 4 = classes, 5 = hookname, 6 = icon_url.
foreach ( $menu as $key => $item ) {
@@ -125,10 +145,13 @@ 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. Dashicons that have a replacement, and namespaced icon names, are
+ * rendered as inline SVG, or leave the menu image empty if the icon is not found.
+ * Any other value is treated as an image URL.
*/
if ( ! empty( $item[6] ) ) {
- $img = '
 . ')
';
+ $img = '
';
+ $icon_name = $dashicon_replacements[ $item[6] ] ?? $item[6];
if ( 'none' === $item[6] || 'div' === $item[6] ) {
$img = '
';
@@ -137,6 +160,24 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {
// The value is base64-encoded data, so esc_attr() is used here instead of esc_url().
$img_style = ' style="background-image:url(\'' . esc_attr( $item[6] ) . '\')"';
$img_class = ' svg';
+ } elseif ( wp_is_valid_icon_name( $icon_name ) ) {
+ $img = '
';
+ $icon = wp_get_icon( $icon_name );
+ if ( '' !== $icon ) {
+ $img = $icon;
+ $img_class = ' dashicons-before svg-icon';
+ } elseif ( ! WP_Icons_Registry::get_instance()->is_registered( $icon_name ) ) {
+ _doing_it_wrong(
+ __FUNCTION__,
+ sprintf(
+ /* translators: 1: Icon name, 2: Admin menu item slug. */
+ __( 'The icon "%1$s" of the admin menu item "%2$s" is not registered.' ),
+ $icon_name,
+ $item[2]
+ ),
+ '7.2.0'
+ );
+ }
} elseif ( str_starts_with( $item[6], 'dashicons-' ) ) {
$img = '
';
$img_class = ' dashicons-before ' . sanitize_html_class( $item[6] );
@@ -283,7 +324,7 @@ function _wp_menu_output( $menu, $submenu, $submenu_as_parent = true ) {
echo '';
}
diff --git a/src/wp-admin/menu.php b/src/wp-admin/menu.php
index 789805d9aae97..36b10211daa1b 100644
--- a/src/wp-admin/menu.php
+++ b/src/wp-admin/menu.php
@@ -21,7 +21,8 @@
* 3: Page title.
* 4: Classes.
* 5: ID.
- * 6: Icon for top level menu.
+ * 6: Icon for top level menu. Dashicons values are kept here and replaced
+ * with SVG icons at render time, see _wp_menu_output().
*
* @global array $menu
*/
@@ -144,10 +145,11 @@
$menu_icon = 'dashicons-admin-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 namespaced icon names.
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_is_valid_icon_name( $post_type_obj->menu_icon )
) {
$menu_icon = $post_type_obj->menu_icon;
} else {
diff --git a/src/wp-includes/admin-bar.php b/src/wp-includes/admin-bar.php
index 24fcd5ad4c118..ec7d4f4996f43 100644
--- a/src/wp-includes/admin-bar.php
+++ b/src/wp-includes/admin-bar.php
@@ -115,6 +115,19 @@ function wp_admin_bar_render() {
$rendered = true;
}
+/**
+ * Returns inline SVG markup wrapped for use as an admin bar node icon.
+ *
+ * @since 7.2.0
+ * @access private
+ *
+ * @param string $icon_name Namespaced icon name, e.g. 'core-admin/wordpress'.
+ * @return string Admin bar icon markup. The wrapper is empty if the icon is not found.
+ */
+function _wp_admin_bar_icon( $icon_name ) {
+ return '
' . wp_get_icon( $icon_name ) . '';
+}
+
/**
* Adds the WordPress logo menu.
*
@@ -286,6 +299,7 @@ function wp_admin_bar_my_account_item( $wp_admin_bar ) {
array(
'id' => 'my-account',
'parent' => 'top-secondary',
+ 'icon' => empty( $avatar ) ? 'core-admin/people' : false,
'title' => '
' . $display_name . '' . $avatar,
'href' => $profile_url,
'meta' => array(
@@ -423,11 +437,14 @@ function wp_admin_bar_site_menu( $wp_admin_bar ) {
}
}
+ $links_to_home = is_admin() || ! current_user_can( 'read' );
+
$wp_admin_bar->add_node(
array(
'id' => 'site-name',
+ 'icon' => $links_to_home ? 'core-admin/home' : 'core-admin/dashboard',
'title' => $title,
- 'href' => ( is_admin() || ! current_user_can( 'read' ) ) ? home_url( '/' ) : admin_url(),
+ 'href' => $links_to_home ? home_url( '/' ) : admin_url(),
'meta' => $meta,
)
);
@@ -510,6 +527,7 @@ function wp_admin_bar_edit_site_menu( $wp_admin_bar ) {
$wp_admin_bar->add_node(
array(
'id' => 'site-editor',
+ 'icon' => 'core-admin/brush',
'title' => __( 'Edit Site' ),
'href' => add_query_arg(
array(
@@ -565,6 +583,7 @@ function wp_admin_bar_customize_menu( $wp_admin_bar ) {
$wp_admin_bar->add_node(
array(
'id' => 'customize',
+ 'icon' => 'core-admin/brush',
'title' => __( 'Customize' ),
'href' => $customize_url,
'meta' => array(
@@ -602,6 +621,7 @@ function wp_admin_bar_my_sites_menu( $wp_admin_bar ) {
$wp_admin_bar->add_node(
array(
'id' => 'my-sites',
+ 'icon' => 'core-admin/sites',
'title' => __( 'My Sites' ),
'href' => $my_sites_url,
)
@@ -712,6 +732,8 @@ function wp_admin_bar_my_sites_menu( $wp_admin_bar ) {
*/
$show_site_icons = apply_filters( 'wp_admin_bar_show_site_icons', true );
+ $default_blavatar = '
' . wp_get_icon( 'core-admin/wordpress', array( 'size' => 16 ) ) . '
';
+
foreach ( (array) $wp_admin_bar->user->blogs as $blog ) {
switch_to_blog( $blog->userblog_id );
@@ -723,7 +745,7 @@ function wp_admin_bar_my_sites_menu( $wp_admin_bar ) {
( wp_lazy_loading_enabled( 'img', 'site_icon_in_toolbar' ) ? ' loading="lazy"' : '' )
);
} else {
- $blavatar = '
';
+ $blavatar = $default_blavatar;
}
$blogname = $blog->blogname;
@@ -937,6 +959,7 @@ function wp_admin_bar_edit_menu( $wp_admin_bar ) {
$wp_admin_bar->add_node(
array(
'id' => 'edit',
+ 'icon' => 'core-admin/pencil',
'title' => $post_type_object->labels->edit_item,
'href' => $edit_post_link,
)
@@ -949,6 +972,7 @@ function wp_admin_bar_edit_menu( $wp_admin_bar ) {
$wp_admin_bar->add_node(
array(
'id' => 'edit',
+ 'icon' => 'core-admin/pencil',
'title' => $tax->labels->edit_item,
'href' => $edit_term_link,
)
@@ -960,6 +984,7 @@ function wp_admin_bar_edit_menu( $wp_admin_bar ) {
$wp_admin_bar->add_node(
array(
'id' => 'edit',
+ 'icon' => 'core-admin/pencil',
'title' => __( 'Edit User' ),
'href' => $edit_user_link,
)
@@ -1288,6 +1313,7 @@ function wp_admin_bar_search_menu( $wp_admin_bar ) {
}
$form = '