Custom svg admin menu icon in WordPress

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.

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.

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.

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