Sidebar navigation: Replace Dashicons icon font with @wordpress/icons SVGs in the sidebar navigation

[lucasmdo]

Problem / Current Behavior

The admin sidebar menu draws its top-level icons using the Dashicons icon font. This is the same legacy approach described in the parent ticket #65089, seen here specifically in the left-hand admin navigation.

Proposed Enhancement

Replace the Dashicons font icons on Core's default top-level admin menu items with SVG icons from the @wordpress/icons library — the same set already used by the editors. The icons keep their current look, position, and labels; only the underlying technique changes.

Worth noting: Core already supports SVG icons for admin menu items (via the menu icon API) and already recolors them to match the active color scheme (#25147), so the rendering path for SVG menu icons exists today. This ticket applies that direction to Core's own default items.

In scope — Core's own default top-level menu icons (Dashboard, Posts, Media, Pages, Comments, Appearance, Plugins, Users, Tools, Settings) and the "Collapse menu" button icon at the bottom of the menu (#50423).

Out of scope:

• Menu icons added by plugins or themes → see Backward Compatibility.
• Restructuring or grouping the navigation itself → this ticket only changes the icon technique.
• The admin bar icons → handled by the sibling Toolbar ticket in this series (#65386).

Rationale

• Consistency: brings the admin menu in line with the icon set already used by the editors, and supports the broader WP 7.0 admin visual reskin (#64308).
• Performance: removes a major reason the icon font is loaded on every admin page, and lets new icons be added without growing a single large font file.

Note: per feedback on #65089, screen-reader benefits here are modest compared to today's approach. The real gains are consistency, performance, and reliability.

Backward Compatibility

• Low-risk and additive. Only Core's own default icons change; their position, labels, and behavior stay the same.
• The public menu icon API is untouched: plugins and themes can still pass a Dashicons class or their own SVG when registering menu items, and the Dashicons stylesheet must stay available for them.
• No change to how the menu is built, to its hooks, or to keyboard navigation.

Related Tickets / References

• #65089 — parent / umbrella: replace Dashicons with @wordpress/icons across wp-admin
• #64308 — broader WP 7.0 admin visual reskin (the "Admin Frame": sidebar + toolbar)
• #25147 — existing SVG support and recoloring for admin menu icons (prior art)
• #50423 — the "Collapse menu" button icon (in scope here)
• #50539 — exploration of an icon-less admin menu (distinct: this ticket keeps the icons)
• #47012 — proposal to simplify admin navigation (distinct: structure, not icon technique)
• ​@wordpress/icons package

[lucasmdo]

Updating the title to be clearer.

[lucasmdo]

#65089: parent / umbrella: replace Dashicons with @wordpress/icons across wp-admin

https://core.trac.wordpress.org/ticket/65387

Replaces the Dashicons icon font glyphs on Core's default top-level admin sidebar menu items with inline SVG icons from the @wordpress/icons library, via the new wp_get_icon() API. Icons keep their current look, position, and labels; only the rendering technique changes, which removes the font glyph dependencies from Core's own menu and prepares for the eventual removal of the Dashicons font from wp-admin.

In scope: the default top-level menu icons (Dashboard, Posts, Media, Pages, Comments, Appearance, Plugins, Users, Tools, Settings) and the Collapse menu button icon. Adds the corresponding SVGs to the core icon library.

Out of scope: plugin and theme menu icons, the admin bar (#65386), and any restructuring of the sidebar navigation. The menu icon API is untouched. Base64 data URI, none/div, and dashicons icon types continue to render as before, and the Dashicons font stays registered for plugins that still rely on it.

Testing:

• Log in as admin and confirm all default top-level menu icons render identically to the previous Dashicons glyphs.
• Check hover, active, and current states for each icon.
• Cycle through the admin color schemes and confirm the icons recolor via fill: currentColor.
• Switch to an RTL locale and confirm the sidebar and the Collapse menu button point in the correct direction, including the folded state.
• Register a menu item with a dashicons class and one with an SVG data URI and confirm both still render as before.

@faisalahammad, thanks for looking at this. I'm reviewing this now :)

Why is that out of scope "plugin and theme menu icons"?

cc: @t-hamano

Related as well:
​https://github.com/WordPress/wordpress-develop/pull/12270

To answer the scope question: this PR only targets Core's default top-level menu items (Dashboard through Settings) plus the Collapse button. Plugin and theme menu icons are explicitly out of scope because they can be custom dashicons classes, external URLs, or base64 data URIs — all of which continue to render via the existing fallback path in _wp_menu_output() (menu-header.php around line 125-150). The new else branch in menu-header.php only activates for registered core/* icon names; everything else falls through to the original dashicons/data-URI/image handling. No API change, no behavior change for extenders.

On #12270 — thanks for flagging. This is the sidebar-only companion to that PR (which covers admin bar + sidebar). #12843 covers the sidebar navigation replacements referenced in #65387, while #12270 handles the admin bar side. They're meant to land together but are tracked separately.