Use SVG icons for menu items

Hi there,

the Menu item label field supports HTML and over markup including <SVG> so the simplest method would be to add your <SVG> code inline within the menu label field.

Hey,
can you tell me what would the code look like exactly?
Thanks!

Hi Angel,

Say, for example, you have an airplane SVG you want to place on a menu item:

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="plane" class="svg-inline--fa fa-plane fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M480 192H365.71L260.61 8.06A16.014 16.014 0 0 0 246.71 0h-65.5c-10.63 0-18.3 10.17-15.38 20.39L214.86 192H112l-43.2-57.6c-3.02-4.03-7.77-6.4-12.8-6.4H16.01C5.6 128-2.04 137.78.49 147.88L32 256 .49 364.12C-2.04 374.22 5.6 384 16.01 384H56c5.04 0 9.78-2.37 12.8-6.4L112 320h102.86l-49.03 171.6c-2.92 10.22 4.75 20.4 15.38 20.4h65.5c5.74 0 11.04-3.08 13.89-8.06L365.71 320H480c35.35 0 96-28.65 96-64s-60.65-64-96-64z"></path></svg>

Here's what David meant by adding an inline svg:
https://share.getcloudapp.com/rRujXWO2

You then add this CSS so the icon is lined up with the text.

.main-navigation .main-nav ul li.menu-item > a {
    display: flex;
    flex-direction: row;
    align-items: center;
}

Thanks!

No problem. :)

Hi Elvin,

I'm trying to do this but the SVG icon and the text appear on the same horizontal line. I've tried a few different options:

1. <svg xmlns="http://www.w3.org/2000/svg" height="36px" viewBox="0 0 24 24" width="36px" fill="#452bc2"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V9h14v10zm0-12H5V5h14v2zM7 11h5v5H7z"/></svg>TODAY

2.

Hi there,

can you raise a new topic where you can share a link to a page where we can see the icons and the issues ?

CSS to center logos for the secondary menu.

.secondary-navigation ul li.menu-item > a {
    display: flex;
    flex-direction: row;
    align-items: center;
}