I wanted to replace the home breadcrumb with a Material Symbols’ icon (The google icon library). But it just displays ‘home’ instead of using the actual icon.

screenshot of the problem

I found the following solution in another thread but what it does is that it wraps the entirety of the breadcrumb with a ‘before’ and ‘after’, which leads the ‘shop’ mention to disply the ‘shop’ icon of the material symbols library.

add_filter( 'woocommerce_breadcrumb_defaults', 'jk_change_breadcrumb_home' );
function jk_change_breadcrumb_home( $defaults ) {
    $defaults['before'] = '<span class="material-symbols-outlined">';
    $defaults['after'] = '</span>';
    $defaults['home'] = 'home';
    return $defaults;

and this is what i get:

screenshot of the visual result