WordUp Pompey!

Several Classic themes used dashicons or Font awesome to support the display of icons in Navigation menus or Buttons?

Can we do the same thing with Block based themes?

Navigation menus

Notes

In this example of a Navigation menu

• WordUp Pompey is the Site Logo block set to 40x40px linked to Home with Rounded style and some left and right padding
• Then we have a normal page link to Home – no icon
• The house icon is a Button with style Fill, text colour Contrast (#222222) and the background the same as the Navigation background. I used Edit as HTML to change the text to a span.

• The Meetup menu item includes an Inline image, width 30px.
  • I couldn’t get it to line up with the other menu items.
  • You can adjust the line height but that doesn’t help.
• The Code of Conduct menu item includes an emoji – a Unicode character
  • I copied and pasted it from WhatsApp

Icons in buttons

Notes

• Home is done in the same way as for the Navigation menu, but this time I didn’t delete the Home text.
• The Meetup icon is an inline image.

Plugins to make it easier?

There may be plugins to integrate SVG icons into navigation or button blocks. I’m not aware of any.