add_menu_page no longer renders base64 encoded SVG icon

[KProvance]

Regarding the add_menu_page() API.

Passing a base64 encoded string (per the instruction provided on the codex for this API (Pass a base64-encoded SVG using a data URI, which will be colored to match the color scheme. This should begin with 'data:image/svg+xml;base64,')) in the $icon_url parameter no longer outputs the icon. The base64 string no longer outputs in the HTML.

The feature still functions properly in WP 5.9.x. As WooCommerce uses this method for their primary admin menu icon, one can see it reproduced by installing and activating WC.

Occurs with FF and Chrome. Using PHP 7.4 and 8.1 alternatively.

[w33zy]

I am also experience this issue this and I've tracked it down to ​esc_url() function on L443.

However, I am not experienced enough with Trac or SVN to pinpoint what was changed and when it was changed.

[kebbet]

Yes, can confirm this. Works in 5.9.3, not in current trunk.

Tested with this code.

<?php
function register_menu_with_custom_svg_icon() {

        //The icon in Base64 format
        $icon_base64 = 'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxhZ2VyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAgMjA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7c3Ryb2tlOiNFMDEwMTA7c3Ryb2tlLXdpZHRoOjI7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMCwyaDIwIE0wLDEwaDIwIE0wLDE4aDIwIi8+Cjwvc3ZnPgo=';
        
        //The icon in the data URI scheme
        $icon_data_uri = 'data:image/svg+xml;base64,' . $icon_base64;
        
        add_menu_page(
        'Example',
        'Example',
        'manage_options',
        'example',
        '',
        $icon_data_uri,
        );
        
}
        
add_action( 'admin_menu', 'register_menu_with_custom_svg_icon' );

[ocean90]

This was broken by the fix for #55496 in [53050].

[kebbet]

Changing line 132 in wp-admin/menu-header.php to

$img_style = ' style="background-image:url(\'' . esc_attr( $item[6] ) . '\')"';

fixes the issue. I can make a PR for this at GitHub.

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

[mukesh27]

Hi there!

Thank you for the ticket and patch.

PR looks fine to me.

Testing for Trunk version

1. Add the below code in theme function.php

<?php
function register_menu_with_custom_svg_icon() {

        //The icon in Base64 format
        $icon_base64 = 'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxhZ2VyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAgMjA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7c3Ryb2tlOiNFMDEwMTA7c3Ryb2tlLXdpZHRoOjI7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMCwyaDIwIE0wLDEwaDIwIE0wLDE4aDIwIi8+Cjwvc3ZnPgo=';
        
        //The icon in the data URI scheme
        $icon_data_uri = 'data:image/svg+xml;base64,' . $icon_base64;
        
        add_menu_page(
        'Example',
        'Example',
        'manage_options',
        'example',
        '',
        $icon_data_uri,
        );
        
}
        
add_action( 'admin_menu', 'register_menu_with_custom_svg_icon' );

2. Icon is not visible for menu item.
3. Apply PR
4. Icon shows fine.

Note: We have to add comment so other committer or contributor do not change it again.

[SergeyBiryukov]

Hi there, welcome to WordPress Trac! Good catch, thanks for the ticket.

[SergeyBiryukov]

In 53092:

Administration: Restore the correct escaping function for base64-encoded SVG icons in the admin menu.

Add a comment to clarify the esc_attr() usage instead of esc_url().

Follow-up to [53050].

Props KProvance, kebbet, w33zy, ocean90, mukesh27.
Fixes #55539.

Thanks for the PR! Merged in https://core.trac.wordpress.org/changeset/53092.

[KProvance]

Replying to SergeyBiryukov:

Hi there, welcome to WordPress Trac! Good catch, thanks for the ticket.

Not a problem. Glad I could help. And props to everyone who fixed it. Well done, folks! :)