Custom Close SVG Icon

Hi there,

see the snippet Ying provides here:

https://generatepress.com/forums/topic/off-canvas-custom-svg-icon/#post-1647379

It works for slide-out panel, but not in mobile menu — hamburger toggle button, nor in sticky menu bar.

Thats correct - the pro-close only applies to off canvas.
The other close icons are just close - see here:

https://github.com/tomusborne/generatepress/blob/adfe090929b0515cdf894f4c6b722cfe8c0790dc/inc/theme-functions.php#L280

David, please check it by yourself - it does not replace the default code, which is inserted by some other rule.

Oops - sorry - so ok you would load the 2 x icons into the one output for example:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'search' === $icon ) {
        $output = '<svg>The magnifying glass</svg><svg>The close icon</svg>';
    }

    return $output;
}, 10, 2 );

OK, I would manage this with CSS, BUT i'd really be happy when have removed the default close icon, which still remains in output HTML.

If you use the method i provided above it should replace BOTH the open/close search icons. With the 2 x SVGs you pass into $output.

Is that not working ?

Indeed! In generate_svg_icon filter (not generate_svg_icon_element).
David, thank you for your patience!

GP Pro adds a little SPAN wrapper, so for hamburger icon it would looks like this:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'menu-bars' === $icon ) {
        $output = '<span class="gp-icon icon-menu-bars">
                    <svg>Hamburger icon</svg>
                    <svg>Close icon</svg>
                </span>';
    }
    return $output;
}, 10, 2 );

Thanks!