Custom Svg Admin Menu Icon in Wordpress

Question

I'm really counting on your help in this one. I searched a lot and found no solution. I want to have a custom icon for my plugin in admin menu, and I want it to integrate well with the color scheme.

I looked here Under $icon_url

(WP 3.8+) If 'data:image/svg+xml;base64...', the specified SVG data image is used as a CSS background

However, if I put a URL to an SVG icon there, all I get is an img with SVG in its src attribute, so it doesn't integrate at all with the color scheme. It's supposed to be a CSS background.

Also, I don't understand this data:image/svg+xml;base64... What does it mean exactly?

I tried embedding inline SVG in the $icon_url but obviously, it won't work, but I just had to try it.

Dashicons are not an option, there's no icon there suitable for my project.

Accepted Answer

Step by Step example using FontAwesome:

Must Read

Including color and custom post types 👍

1 Pick an icon

Goto:
Pick an icon, I have chosen "fa-flask" for this example.

2 Get the SVG

Goto:
Find the icon, it will be the name without the fa prefix - in my case, that is "flask.svg".
Click the icon, then click "Raw" in Github

Bring the SVG into Wordpress

Inside your functions.php, where you register your custom post type, add the following snippet:

add_action('init', 'my_init');
function my_init() {
    register_post_type('labs', [
        'label' => 'Labs',
        // .. ect
        'menu_icon' => 'data:image/svg+xml;base64,' . base64_encode('<svg width="20" height="20" viewBox="0 0 1792 1792" xmlns=""><path fill="black" d="M1591 1448q56 89 21.5 152.5t-140.5 63.5h-1152q-106 0-140.5-63.5t21.5-152.5l503-793v-399h-64q-26 0-45-19t-19-45 19-45 45-19h512q26 0 45 19t19 45-19 45-45 19h-64v399zm-779-725l-272 429h712l-272-429-20-31v-436h-128v436z"/></svg>')
     ]);
}

Important notes:

The contents of base64_encode is the copied raw string from Font Awesomes github page.
You need to change two small things within the svg string:
- 1: Add a fill="black" attribute to the path/s elements - this allows the color to be change by Wordpress.
- 2: (optional) Change the width and height to 20, as this is the admin width/height size and seems to result it a crisper result.

Accepted Answer

I got the solution by analyzing Woocommerce. If no url is supplied to the add_menu_page function, WordPress uses the default dashicon. So it's just a matter of overriding the default style. Like add this to admin styles:

#adminmenu #toplevel_page_yourpageid .menu-icon-generic div.wp-menu-image:before {
    font-family: your_font !important;
    content: '\eiconid';
    font-size: 1.3em!important;
}

I converted svg to font on Icomoon.

Answer 3

Adding custom SVG icons.

I wanted my own custom SVG icon in my wordpress plugin, so had a look at this: and it all seems easy enough on paper. The guide tells you how to prepare the $icon_url parameter:

$icon_url (string) (Optional) The URL to the icon to be used for this menu.

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,'.

However, I wrestled with this a bit and wanted to add in some notes when using the $icon_url parameter. From my experience and from looking on forums, using your custom icon isn’t as easy as just creating your SVG and encoding it. Here’s the step by step process to add custom SVG icon to the admin menu:

First, get or create your SVG icon in any way you want.
Next, clean up the SVG file and format it correctly
Then base64 encode the file
Prefix the base64 string with 'data:image/svg+xml;base64,'

...and that will give you a valid $icon_url string. Let me expand on those steps.