Add MD Icons anywhere!

I think this is a development that will change the way you use MD. You can now use MD Icons anywhere in the Block Editor visually.


You can install the md-icons-gutenberg.zip file as a plugin and it only works with Marketers Delight and its child themes.

Do whatever you want. Insert social media icons, create icon buttons, better headings and more.

@Alex will hopefully add this in next update to MD core — so worry not. This plugin can be deleted once the next big update comes.

More power to you!

 

[gauravtiwari]

Just remove the Google+ and Periscope icons @Alex

 

[Alex]

You continue to amaze me with your theme mods. I've been sketching out a way to make the icon library more dynamic because on projects I keep wanting to add new icons and can't stand to include the entire Font Awesome library. So this is a good nudge in that direction.

I wonder, could the native md_icons() function be helpful here? You can see the source in lib/api/icons.php and that would make this mod far more dynamic especially once we have the ability to add/remove icons from the MD admin panel.

 

[gauravtiwari]

Yes. That can be done. All you need is to figure out a way to insert the active icons' classes into /src/icons.json in the plugin separated by commas.

 

[gauravtiwari]

One more thing, if the font-icons file doesn't include an icon, it won't show in the editor even if you add all the classes in the icons.json file.

 

[gauravtiwari]

Here are the icons you must add to icon-font:

1. amazon icon — very essential for affiliates.
2. home icon — to use in navigation menu as well as breadcrumbs.
3. icon-hand-o-right — to use in lists and CTAs.
4. icon-star-half-o and icon-star — star icon is not geometrical and is very pointy as of now. You can use a better version of it. Half star is important if I want to rate something 4.4, 4.5, 4.6, .., 4.9 stars.

I have attached the gt-icons that I use here and there on gauravtiwari.org. My custom version of plugin loads these as well.

 

[gauravtiwari]

I think this is a development that will change the way you use MD. You can now use MD Icons anywhere in the Block Editor visually.
View attachment 3124

You can install the md-icons-gutenberg.zip file as a plugin and it only works with Marketers Delight and its child themes.

Do whatever you want. Insert social media icons, create icon buttons, better headings and more.

@Alex will hopefully add this in next update to MD core — so worry not. This plugin can be deleted once the next big update comes.

More power to you!

Updated version attached. Compatible with 5.2.3

 

[Alex]

Updated version attached. Compatible with 5.2.3

Good stuff. My recommendations to make this fully compatible with the new icons tools in MD5.2.3:

1. Instead of hard coding the path to the md.woff file in editor.css, use the new md_font_icons_url() function to dynamically render the URL. This function checks the child theme for md.woff and loads that if it exists, otherwise it falls back to the default icon file.

2. You can get a list of all icon IDs, including any custom icons added through MD Icons with this function: md_get_icons( 'ids' ). This will save you from having to manually maintain your icons list here.

I am still evaluating to see if this is a good fit for inclusion in MD core, but at the least this is a very nice to have plugin.

 

[Some French Dude]

As of today, what is the best way for to use @gauravtiwari 's icons? I'm especially interested in the Amazon one. What process should I follow based on your latest exchanges?

 

[gauravtiwari]

Wait, I will compile my version as a plugin and upload here.

 

[gauravtiwari]

Hi @Some French Dude , please try this file (upload it as a plugin and clear cache, if any).

 

[Some French Dude]

@gauravtiwari , do I need to do anything else?
1. @Alex suggested a way for easy maintenance?
2. So your icon list has not been integrated into MD core as of today?
3. What if I want insert an icon a button or in a heading? Is there a GUI way to do so?

Thanks so much for sharing. We love having you here in the community.

 

[gauravtiwari]

@gauravtiwari , do I need to do anything else?
1. @Alex suggested a way for easy maintenance?
2. So your icon list has not been integrated into MD core as of today?
3. What if I want insert an icon a button or in a heading? Is there a GUI way to do so?

Thanks so much for sharing. We love having you here in the community.

1. He did but I am 3 out of a perfect 10 in PHP. I'll learn how to do that.
2. Not yet.
3. You can use this to add icon literally everywhere in the content. Button, List, Link, Code, Paragraph, headings and whatnot.

 

[nguyenduyphuong]

Can i use your plugin for classic editor?

 

[Alex]

Can i use your plugin for classic editor?

No, this is a mod for the Block editor. Adding to the tinymce editor requires a different method.

 

[nguyenduyphuong]

No, this is a mod for the Block editor. Adding to the tinymce editor requires a different method.

Really like it and want use it for classic editor. Any roadmap integrate it with tinymce?

 

[Alex]

Really like it and want use it for classic editor. Any roadmap integrate it with tinymce?

It's a good idea, probably best to make a new feature request and we can gauge interest. I don't see WordPress totally eliminating TinyMCE, so it seems worthwhile. We've already built a couple of icon pickers into MD so far:

 

[nguyenduyphuong]

It's a good idea, probably best to make a new feature request and we can gauge interest. I don't see WordPress totally eliminating TinyMCE, so it seems worthwhile. We've already built a couple of icon pickers into MD so far:

I made a new feature request Here