SOLVED: Sub menu icon disappears if nav menu item’s title contain <svg> or <i> tag

Bugs
1

Bricks Version: 1.3.7
Browser: Chrome 99
OS: macOS

Background

I’m working on a solution to add SVG icons before the menu items title in a menu and the icon changes color depending on which color is set for text in Nav Menu element in Bricks. I’ve solved it by creating a custom field for menu items and then prepending the SVG before the title with a bit of code in functions.php in a Bricks child theme.

Issue

When using the Nav Menu element in Bricks I noticed that the icon that indicates if a menu item has a sub menu had disappeared.

How to reproduce

You can reproduce this issue without adding code like I did.

  1. Go to Appearances > Menus
  2. Choose a menu and a menu item that has a sub menu.
  3. Write “<svg” anywhere in the Navigation Label.
  4. Save the menu.
  5. Go to a page where the menu is displayed through a Nav Menu element and the menu item should have a sub menu icon.

Expected behaviour: Sub menu icon is visible.

Actual behaviour: Sub menu icon is not visible.

Possible cause

I traced down the possible cause for the disappearance to code found in the Bricks theme folder > includes > elements > nav-menu.php on line 22-24 (version 1.3.7). It’s an if statement that returns $title if it finds <i class= or <svg in the $title without adding the icon for the sub menu. It seems that it will return the title before it appends or prepends an icon to a menu item with a sub menu because there is already <svg in the $title.

Help needed

If the cause is what I describe above it would be nice to get a fix in a future version of Bricks if possible. But right now it would be nice to find a solution. Does anyone have any idea how to solve it?

Here is the code I used to prepend the SVG to the menu item.

function my_svg_menu_icon( $items, $args ) {
  foreach( $items as &$item ) {
    $icon = get_field('svg_menu_icon', $item);
    if( $icon ) {
      $item->title = $icon . $item->title;
    }
  }
  return $items;
}
add_filter('wp_nav_menu_objects', 'my_svg_menu_icon', 10, 2);

The svg_menu_icon is a custom field for menu items I’ve created using ACF plugin.

So far I’ve tried to solve the issue by

  1. giving the filter hook that prepends the SVG a higher priority than the one in nav-menu.php. This changes nothing.
  2. Tried to prepend the SVG in nav-menu.php instead but since I don’t have a clear grasp of how it works yet I was unable to find a solution.
  3. Used Menu Icons by ThemeIsle plugin to add the SVG icon. Both icons appear because the SVG is referenced through a link in a <img> tag. But then I can’t change the color of the SVG anymore. I use the value currentColor on all fill and stroke attributes to make the icon inherit the same color as the text of the menu item.

Thanks in advance to anyone willing to help! :slight_smile:

2

Hello @robin

Thank you for your report and sorry for the late reply.

You probably found a solution already.

Nevertheless, you would need to use the same Bricks hook to add your icon, but with priority 11 or higher:

add_filter( 'nav_menu_item_title', 'your_nav_menu_item_title', 11, 4 );

Reference: nav_menu_item_title | Hook | WordPress Developer Resources