How to change shopping cart icon and search icon to vector svg image

Hi there,

the Theme uses SVG images for all its icons including the Menu Cart and Search.

Are you wanting to replace those with your own images ?

Yes please...I have my own svg files to match looks of other icons.
I will remove maintenance mode of site I am working on so you can take a look..
Address is below

Thank you.

ooh nice :)
Ok so we use inline SVG HTML for our icons. And we have the generate_svg_icon_element hook you can use to swap them. See here:

https://docs.generatepress.com/article/generate_svg_icon_element/

To get the SVG HTML you can open the .svg file in a text editor / IDE or use this site:

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

The snippet for your Shopping Car icon would be like so:

add_filter( 'generate_svg_icon_element', function( $output, $icon ) {
    if ( 'shopping-cart' === $icon ) {
        $output = '<svg>Your-custom-cart-icon</svg>';
    }
    return $output;
}, 10, 2 );

And for your Search icon:

add_filter( 'generate_svg_icon_element', function( $output, $icon ) {
    if ( 'search' === $icon ) {
        $output = '<svg>Your-custom-search-icon</svg><svg>Your-custom-close-icon</svg>';
    }
    return $output;
}, 10, 2 );

Note that this has 2 x <svg> elements - one for the Search and one for the close X

Thank you.
Hm...I added following to theme functions but didn't work.

add_filter( 'generate_svg_icon_element', function( $output, $icon ) {
if ( 'shopping-cart' === $icon ) {
$output = '<svg xmlns="http://www.w3.org/2000/svg" width="31.084" height="27.425"><path data-name="Path 1" d="M22.975 22.626a1.341 1.341 0 0 1 .751.232 1.359 1.359 0 0 1 .5.615 1.4 1.4 0 0 1 .078.793 1.383 1.383 0 0 1-.37.7 1.347 1.347 0 0 1-.693.376 1.331 1.331 0 0 1-.78-.078 1.356 1.356 0 0 1-.608-.505 1.408 1.408 0 0 1-.128-1.288 1.357 1.357 0 0 1 .292-.447 1.332 1.332 0 0 1 .961-.4m-10.136 0a1.337 1.337 0 0 1 .751.232 1.371 1.371 0 0 1 .5.615 1.411 1.411 0 0 1 .077.793 1.374 1.374 0 0 1-.37.7 1.337 1.337 0 0 1-1.473.3 1.357 1.357 0 0 1-.608-.505 1.408 1.408 0 0 1-.128-1.288 1.332 1.332 0 0 1 .733-.744 1.33 1.33 0 0 1 .519-.1m10.136-2.056a3.337 3.337 0 0 0-1.877.578 3.417 3.417 0 0 0-1.244 1.538 3.459 3.459 0 0 0 .731 3.735 3.374 3.374 0 0 0 1.73.939 3.339 3.339 0 0 0 1.952-.2 3.385 3.385 0 0 0 1.516-1.262 3.454 3.454 0 0 0-.424-4.323 3.373 3.373 0 0 0-2.385-1.009m-10.135.003a3.337 3.337 0 0 0-1.877.578 3.417 3.417 0 0 0-1.244 1.538 3.48 3.48 0 0 0-.193 1.981 3.443 3.443 0 0 0 .925 1.755 3.374 3.374 0 0 0 1.73.939 3.339 3.339 0 0 0 1.952-.2 3.386 3.386 0 0 0 1.507-1.261 3.454 3.454 0 0 0-.424-4.323 3.373 3.373 0 0 0-2.376-1.007M8.594 5.487h20.2L27.219 12.4l-15.4 1.242ZM1.013 0a1.006 1.006 0 0 0-.717.3 1.041 1.041 0 0 0 0 1.454 1.01 1.01 0 0 0 .717.3h4.043c1.676 4.216 3.331 8.438 4.995 12.662L8.52 18.454a1.04 1.04 0 0 0-.073.5 1.027 1.027 0 0 0 .534.808.986.986 0 0 0 .479.12h16.893a1.028 1.028 0 0 0 0-2.056H10.98l.877-2.12 16.271-1.318a1.033 1.033 0 0 0 .578-.252 1.068 1.068 0 0 0 .33-.544l2.028-8.912a1.074 1.074 0 0 0-.993-1.254H7.781L6.681.641a1.049 1.049 0 0 0-.376-.462A1.016 1.016 0 0 0 5.743 0Z" fill="#fff"/></svg>';
}
return $output;
}, 10, 2 );

add_filter( 'generate_svg_icon_element', function( $output, $icon ) {
if ( 'search' === $icon ) {
$output = '<svg xmlns="http://www.w3.org/2000/svg" width="25.276" height="25.64"><path data-name="Path 2" d="M19.085 10.742a8.494 8.494 0 1 1-8.494-8.618 8.565 8.565 0 0 1 8.494 8.618m5.887 13.083-6.193-6.277a10.829 10.829 0 0 0 2.4-6.8A10.68 10.68 0 0 0 10.591.004a10.519 10.519 0 0 0-7.488 3.141 10.823 10.823 0 0 0-3.1 7.6 10.679 10.679 0 0 0 10.59 10.742 10.475 10.475 0 0 0 6.707-2.436l6.184 6.277a1.039 1.039 0 0 0 1.484.006 1.074 1.074 0 0 0 0-1.506Z" fill="#fff"/></svg>';
}
return $output;
}, 10, 2 );

Aah - you need to enable SVG icons.
Go to Customizer > General and switch the Icon Type to SVG

Hm....I have done that but still not working.

Actually, if you look at the site, search icon changed but not the cart icon.

Try combining them into filter like so:

add_filter( 'generate_svg_icon_element', function( $output, $icon ) {
    if ( 'shopping-cart' === $icon ) {
        $output = '<svg>Your-custom-cart-icon</svg>';
    }
    if ( 'search' === $icon ) {
        $output = '<svg>Your-custom-search-icon</svg><svg>Your-custom-close-icon</svg>';
    }
    return $output;
}, 10, 2 );

I did but it does not work.
Only changes search icon but not cart icon.

I used different image for both cart and search and only changes search icon.

Is there css that needs to be changed as well for the change to take effect?

No, try adding an item to the cart and then removing it. Should clear any transients - that may do the job

So weird...that's not working either.
I tried everything like clearing history, cache. Loading in incognito...etc.

Try this for the Shopping cart icon:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'shopping-cart' === $icon ) {
        $svg = 'your SVG here';

        return sprintf(
            '<span class="gp-icon %1$s">
                %2$s
            </span>',
            $icon,
            $svg
        );
    }

    return $output;
}, 15, 2 );

I found that in the forum and tried that as well and did not work.
Not sure why...do those codes work for you?