[Resolved] Adding Google Font Icons

[Stephen]

Adding bootstrap icons to buttons is easy. Is there a way to add Google Font icons?

And what does this do? Customizer > General Icon Type (select SVG or Font)

I originally selected SVG for Icon Type and added Bootstrap icons. Changed to “Font” thinking it would give me different options in the block editor for adding the icons. But it doesn’t change anything, and bootstrap icons are still there.

[David]

Hi there,

first off:

And what does this do? Customizer > General Icon Type (select SVG or Font)

This only applies to the Themes Icons – eg. Hamburger icon, Navigation search, Category/Tag links, Shop Cart etc. It doesn’t add fonts for use in the editor.
Switching them to SVG just means the theme doesn’t require a font file to be loaded.

Google Icons – its actually a Font as well and this doc explains how to add them:

https://developers.google.com/fonts/docs/material_icons#setup_method_1_using_via_google_fonts

However, by default the WP Core blocks and editor doesn’t have icon options, so i assume you have a plugin that is adding those. And just installing a Google font isn’t going to change that.

If you use the GenerateBlocks plugin then you can add your own SVG icons to Buttons and the Headline Blocks.

[Stephen]

Thanks for clarifying the first part.

No plugin. Just adding icons to buttons.

So Google font icons can’t be added to the buttons, right? I don’t see anywhere to add info (in the Icon options for the GP buttons) to reference them.

And what do you mean add my own svg icons?

[David]

If you’re using GenerateBlocks – the Headline and Buttons block have an SVG HTML Field that you can add inline SVGs to – see this article:

https://docs.generateblocks.com/article/adding-custom-svg-icons/

Google Icons have an option to download SVGs for – so you the same method as above ‘should’ work

[Stephen]

I already did add SVG HTML in the icon area of GP buttons. I mentioned using bootstrap icons in the first post. That’s how I used them. Maybe that wasn’t clear.

Google has more of them, though, so that’s why I’m trying to implement them, and I’m asking how to do it, or if it’s possible with Google icons.

You said to follow instructions to download the Google font, but then said that downloading the font wouldn’t change anything.

Now we’re talking about downloading Google SVGs to my desktop. But how does that provide me with the info needed in the “SVG HTML” area that we’re talking about?

Thanks.

[David]

Go to https://fonts.google.com/icons – and select the Icon, and click Download SVG.
Then go to:

https://jakearchibald.github.io/svgomg/

And open the SVG you downloaded.
Once its open, click the Markup menu item and copy the SVG code it provides ( which will look like the example in the doc i provided ) and paste that code into the SVG HTML Field.

[Stephen]

Sweet! That’s exactly what I was looking for.

[Stephen]

Is there any easy way to add icons in the navbar (menu items)?

[Leo]

You can copy the SVG code in the menu label field 🙂

[Stephen]

Thanks a bunch.

[Leo]

No problem 🙂

[Author]

Posts