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 https://codex.wordpress.org/Function_Reference/add_menu_page 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.

Answer 1

Step by Step example using FontAwesome:

Including color and custom post types 👍

1 Pick an icon

• Goto: http://fontawesome.io/icons/
• Pick an icon, I have chosen "fa-flask" for this example.

2 Get the SVG

• Goto: https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/black/svg
• 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="http://www.w3.org/2000/svg"><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.

Answer 2

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

After you have converted the icondata in base 64, correct way to put it is like this;

The "," is important

'data:image/svg+xml;base64,'.$icon_data_in_base64

Answer 4

Just thought I should add the following:

To get the SVG to automatically re-colour to match the theme, it needs to have a fill attribute set. This is because it's dynamically altered through script, and it otherwise won't know what part to re-colour.