SVG Icons in WordPress

Most "Icon Packs" one can find or purchase for use in WordPress are most likely based on freely available images.

For example, the Skyboot Custom Icons for Elementor bases its library on several freely available Icon / Symbol / Glyph resources. One of their Icon Libraries includes one titled "Material Design Icons", which is sourced from https://materialdesignicons.com/. How did I discover this? Well, the nice people that made the Skyboot Custom Icon Plugin were nice enough to obviously include a link to their open source library. That's a compliment, because they probably could have complied with the open source license requirements by simply disclosing the information. But they were nice enough to include a link in their GUI for their source.

So What Can You Do With That Information?

Go to the source, such as https://materialdesignicons.com, and download the individual icons in a myriad of different formats (SVG, PNG, etc.).

Or, go directly to the file(s) containing the Icons / Symbols / Glyphs. Skyboot Custom Icons for Elementor includes them in several file formats (TTF, WOFF, WOFF2, etc.). With a font editor like FontCreator ($, but there are other free ones like FontForge), SVG Icons can be extracted / exported.

FontForge: https://stackoverflow.com/questions/47902878/fontforge-export-a-glyph-to-svg-with-fontforge-command-line (only from a script or command line)
FontCreator: https://forum.high-logic.com/viewtopic.php?t=8859 (supposedly cannot be done...)
MainType: Great for browsing through fonts. Not so great with searching unless one knows the 'Codepoint' / AKA 'ASC #' (in the proper format too). So for searching by name, use FontCreator to find the code then go back to MainType as search by name doesn't work
FontLab: Yup, exports to SVG. The entire editing screen including guidelines, etc. Not even a choice to export "selected items only"
Microsoft PowerPoint: Yup, as text. Doesn't seem to give the option to export as curves.
CorelDraw: Yup, exports as curves. But good luck finding the glyph in a font that has 5000 plus glyphs. Search? Corel never heard of that word.

Final Thought (Actually a Premature Ending to this Subject)

I'm giving up. I was working on a specific "Font" titled "Material Design Icon", which contains a bunch of glyphs in the Private Use Unicode Range. Could not get anything to work. Character Map from Windows couldn't see a character map (which goes a long way in explaining why entering a Unicode Value for... Wait, just got something.

More Final Thoughts

And is it turns out, it isn't me. After extensive research it turns out, as usual, Microsoft has chosen to do weird things that mess with standards. So if you want to use or edit, etc Fonts / Glyphs that are in the "Personal Use Area" on Windows: FORGET IT! Microsoft has screwed you. Make you own new font by copying from the original font into a new one. Details to come later.

Convoluted Solution

Open original Font in FontForge (WOFF, TTF, whatever version)
Under Element, Font Info, Change the Name to something unique, even a simple as adding a '2' after all the different names (yup, all fonts have more than one name, the important one here is Unique ID under TTF, but thankfully changing the name under PS also changes the name in most places under TTF)
Generate the font: File, Generate Font, select TTF, give it a name, and under options, make sure to select generate Character Map, save it, ignore errors.
Install the Font
In MS Word, select the use the standard ALT + "Unicode Number of the Glyph on the Keypad in Decimal" (doesn't seem to work in PowerPoint, Corel, or anything else)
Save it as an HTM file, then open the HTM file in a web browser.
Copy that and paste into PowerPoint
And it works!
But too bad, because even PowerPoint's ability to save a picture as an SVG file doesn't work, so all of this was useless!
Insert tirade of four letter words here!

This crap got so ludicrous that changing the cadence of ALT + Unicode Number on Keypad would produce different results. Four quick taps produces an exclamation mark. Four slow taps produces a club symbol. That's in CorelDraw. In Word the result is that it switches to a different font. WTF?

Here's an example of the Material Design Font: Male Gender Symbol, Offset in Character Map: 669, Unicode # F029D, Microsoft ALT + 11

MainType Software

One note on this: It messes up fonts with programs other than Microsoft programs. Installing a Font with Windows does no good. IE, other applications won't see the font. There might be an easy solution for this. But having that as the default behavior is messed up. Don't use the software.