Hi there,
You can use this PHP snippet to change the icon:
add_filter( 'generate_svg_icon', function( $output, $icon ) {
if ( 'shopping-bag' === $icon ) {
$svg = '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="shopping-bag" class="svg-inline--fa fa-shopping-bag fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M352 160v-32C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128v32H0v272c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V160h-96zm-192-32c0-35.29 28.71-64 64-64s64 28.71 64 64v32H160v-32zm160 120c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24zm-192 0c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24z"></path></svg>';
return sprintf(
'<span class="gp-icon %1$s">
%2$s
</span>',
$icon,
$svg
);
}
return $output;
}, 15, 2 );
Simply change the value of $svg within the code to your custom <svg>.
This particular code is if you’re using shopping bag on Appearance > Customize > Layout > WooCommerce for this to work. https://share.getcloudapp.com/NQuJ68yO
If you’re using other icon variants like shopping-cart or shopping-basket, you’ll have to do if ( 'shopping-cart' === $icon ) { ... } or if ( 'shopping-basket' === $icon ) { ... } instead.