Icons API: Add wp_get_icon() to render registered icons as inline SVG by t-hamano · Pull Request #12010 · WordPress/wordpress-develop

t-hamano · 2026-05-29T06:45:43Z

This PR adds wp_get_icon(), a procedural wrapper around WP_Icons_Registry that returns a registered icon as an inline SVG string.

Based on WordPress/gutenberg#78332.

Trac ticket: https://core.trac.wordpress.org/ticket/64847

Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 4.8
Used for: Porting the function and PHPUnit tests from the referenced Gutenberg PR to core conventions. I reviewed and tested the result; all 9 tests pass.

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

Introduce a procedural wrapper around `WP_Icons_Registry` so themes and plugins can render any registered core icon as an inline SVG from PHP, mirroring the React `<Icon>` component. This bridges the gap for PHP contexts that otherwise depend on the deprecated dashicons font. `wp_get_icon()` looks up the icon content via the registry and uses `WP_HTML_Tag_Processor` to apply configurable `size` and `class` attributes, plus accessibility handling: a `label` produces `role="img"` and `aria-label`, while its absence marks the icon `aria-hidden="true"`. The function lives in a new `icons.php`, following the established registry-class-plus-procedural-API pairing used by connectors.php and abilities.php. Props ... Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

github-actions · 2026-05-29T06:46:49Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props wildworks, mukesh27, jonsurrell, tyxla.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

github-actions · 2026-05-29T06:49:39Z

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

All changes will be lost when closing a tab with a Playground instance.
All changes will be lost when refreshing the page.
A fresh instance is created each time the link below is clicked.
Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

The test file only covers wp_get_icon(); the_wp_icon() does not exist. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

mukeshpanchal27 · 2026-05-30T06:37:27Z

+ * @return string SVG markup for the icon, or empty string if not found.
+ */
+function wp_get_icon( $name, $args = array() ) {
+	$icon = WP_Icons_Registry::get_instance()->get_registered_icon( $name );


I think better to check if $name is not empty. WDYT?

if ( empty( $name ) ) { return; }

Since get_registered_icon() returns null if $name is empty, adding an empty check feels redundant.

sirreal

Reproducing some feedback that I unintentionally left elsewhere (WordPress/gutenberg#78332 (review)).

sirreal · 2026-06-12T09:10:19Z

+ * @return string SVG markup for the icon, or empty string if not found.
+ */
+function wp_get_icon( $name, $args = array() ) {
+	$icon = WP_Icons_Registry::get_instance()->get_registered_icon( $name );


What do we know about the registered icons? If this is a public API where arbitrary SVG content (that passes KSES checks) may be in the icon, things can get very complicated. One that comes to mind is if the SVG has a viewBox, then a single size argument may be tricky. Are icons required to be square? Is that enforced?

And just to confirm, anything in the registry has passed through KSES, right?

sirreal · 2026-06-12T09:11:06Z

+	if ( ! empty( $args['class'] ) ) {
+		$processor->add_class( $args['class'] );
+	}


Is this a single class, or could it be multiple classes? The ::add_class method expects a single class, and multiple classes should be applied individually.

Something like $processor->add_class( 'wp-icon class2 class3' ) is not how the method is intended to be used.

sirreal · 2026-06-12T09:11:20Z

+	if ( ! empty( $args['label'] ) ) {
+		$processor->set_attribute( 'role', 'img' );
+		$processor->set_attribute( 'aria-label', $args['label'] );
+	} else {
+		$processor->set_attribute( 'aria-hidden', 'true' );
+	}


Consider that the svg content may already have these attributes, so if one branch should have role and aria-label but not aria-hidden, and vice-versa for the other branch, then it's a good idea to remove the attributes from the other branch so we don't wind up with:

<svg aria-hidden="true" role="img" aria-label="whoops?" />

Suggested change

if ( ! empty( $args['label'] ) ) {

$processor->set_attribute( 'role', 'img' );

$processor->set_attribute( 'aria-label', $args['label'] );

} else {

$processor->set_attribute( 'aria-hidden', 'true' );

}

if ( ! empty( $args['label'] ) ) {

$processor->set_attribute( 'role', 'img' );

$processor->set_attribute( 'aria-label', $args['label'] );

$processor->remove_attribute( 'aria-hidden' )

} else {

$processor->set_attribute( 'aria-hidden', 'true' );

$processor->remove_attribute( 'role' );

$processor->remove_attribute( 'aria-label' )

}

(Do check me and test this, consider the suggestion pseudo-code)

sirreal · 2026-06-12T09:11:39Z

+	$processor->set_attribute( 'width', (string) $args['size'] );
+	$processor->set_attribute( 'height', (string) $args['size'] );


What if we get something other than int, is that possible? The string "10%", or other less sensical values: [ '9', '9' ], "nonsense".

Yeah, came here to ask some of the same. Also, what about negative integers - should we make sure it's not the case by calling absint() on it or something?

tyxla · 2026-06-12T11:14:56Z

+		$processor->set_attribute( 'role', 'img' );
+		$processor->set_attribute( 'aria-label', $args['label'] );
+	} else {
+		$processor->set_attribute( 'aria-hidden', 'true' );


For decorative icons, should we also disable focusable to match what render_block_core_icon() is doing?

Suggested change

$processor->set_attribute( 'aria-hidden', 'true' );

$processor->set_attribute( 'aria-hidden', 'true' );

$processor->set_attribute( 'focusable', 'false' );

tyxla · 2026-06-12T11:15:30Z

+
+	$processor->set_attribute( 'width', (string) $args['size'] );
+	$processor->set_attribute( 'height', (string) $args['size'] );
+	$processor->add_class( 'wp-icon' );


How necessary is this class? Are we adding it anywhere else? I don't think we are, and this may mean we're actually producing non-identical output with render_block_core_icon() for example.

If we want to adopt it, we should likely consider adding it to render_block_core_icon() and any other React paths that render icons.

tyxla · 2026-06-12T11:15:53Z

+ * }
+ * @return string SVG markup for the icon, or empty string if not found.
+ */
+function wp_get_icon( $name, $args = array() ) {


Not a blocker, but we may want to refactor render_block_core_icon() to use this function instead of reinventing some of the same logic.

tyxla · 2026-06-12T11:16:04Z

+		$processor->set_attribute( 'aria-hidden', 'true' );
+	}
+
+	return $processor->get_updated_html();


Just to clarify, are we intentional about not adding a filter here?

tyxla · 2026-06-12T11:16:23Z

+	$processor->set_attribute( 'width', (string) $args['size'] );
+	$processor->set_attribute( 'height', (string) $args['size'] );


Yeah, came here to ask some of the same. Also, what about negative integers - should we make sure it's not the case by calling absint() on it or something?

tyxla · 2026-06-12T11:17:40Z

+	 */
+	public function test_wp_get_icon_escapes_attributes() {
+		$output = wp_get_icon( 'core/plus', array( 'class' => '"><script>alert(1)</script>' ) );
+		$this->assertStringNotContainsString( '<script>', $output );


What's the expected form here? <script>? Might make sense to add some more assertions or just change to a positive assertion that matches what exactly we expect.

We could probably add some more assertion like assertEqualHTML for things like assertHTMLContainsNoTags( [ 'script' ], $html ) or similar.

For this case, it may be a good idea to create a tag processor with something like this, what we care about is not having a SCRIPT tag:

$p = new WP_HTML_Tag_Processor('<svg><script></script>'); while ( $p->next_token() ) { var_dump( $p->get_token_name() ); if ( 'SCRIPT' === $p->get_token_name() ) { echo 'TEST FAILURE'; throw new Error('bad bad bad'); } } // assert $p->paused_at_incomplete_token() === false;

Or it may be better to just assert that that class was set:

$p = new WP_HTML_Tag_Processor('<hax0r>'); $p->next_tag(); $p->add_class('"><script>alert(1)</script>'); $malicious = $p->get_updated_html(); $p = new WP_HTML_Tag_Processor($malicious); $p->next_tag(); assert( $p->has_class( '"><script>alert(1)</script>' ) ); echo 'test passed';

tyxla · 2026-06-12T11:18:28Z

+	 * @ticket 64847
+	 */
+	public function test_wp_get_icon_escapes_attributes() {
+		$output = wp_get_icon( 'core/plus', array( 'class' => '"><script>alert(1)</script>' ) );


Should we also test escaping in label and aria-label and any other user-controller attribute?

tyxla · 2026-06-12T11:20:01Z

+	$processor->set_attribute( 'height', (string) $args['size'] );
+	$processor->add_class( 'wp-icon' );
+
+	if ( ! empty( $args['class'] ) ) {


Is it fine if we pass multiple classes there (class-1 class-2)? To be precise and use the API correctly, should we explode() those and call add_class() for each of them? If you agree, let's also add a test for that.

t-hamano · 2026-06-13T14:59:18Z

@sirreal @tyxla Thanks for the feedback! To avoid duplicate reviews, it might be better to focus reviews on the Gutenberg PR. Once the Gutenberg PR is ready for shipping, I'd like to reflect that code into this PR.

t-hamano marked this pull request as ready for review May 29, 2026 06:46

t-hamano mentioned this pull request May 29, 2026

Icons: Add PHP method(s) for rendering inline SVG icons from the registry WordPress/gutenberg#78332

Open

Tests: Fix inaccurate docblock referencing nonexistent the_wp_icon().

54df3d4

The test file only covers wp_get_icon(); the_wp_icon() does not exist. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

mukeshpanchal27 reviewed May 30, 2026

View reviewed changes

Merge branch 'trunk' into 64847-wp-icon-function

7bc1bd8

t-hamano mentioned this pull request Jun 11, 2026

SVG Icon API: Iteration for WordPress 7.1 WordPress/gutenberg#75715

Open

19 tasks

Merge branch 'trunk' into 64847-wp-icon-function

961087d

sirreal reviewed Jun 12, 2026

View reviewed changes

tyxla reviewed Jun 12, 2026

View reviewed changes

		$processor->set_attribute( 'width', (string) $args['size'] );
		$processor->set_attribute( 'height', (string) $args['size'] );

	$processor->set_attribute( 'aria-hidden', 'true' );
	$processor->set_attribute( 'aria-hidden', 'true' );
	$processor->set_attribute( 'focusable', 'false' );

Conversation

t-hamano commented May 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Use of AI Tools

Uh oh!

github-actions Bot commented May 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 29, 2026

Test using WordPress Playground

Some things to be aware of

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sirreal left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

t-hamano commented Jun 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

t-hamano commented May 29, 2026 •

edited

Loading

github-actions Bot commented May 29, 2026 •

edited

Loading