How to add custom svg

Hi Randy,

The generate_off_canvas_toggle_output should be what you are looking for.

I just noticed that it's not added to our documentation yet but see some examples of the usage here:
https://generatepress.com/forums/search/generate_off_canvas_toggle_output/

Let me know :)

OK, I see that example, thank you! Just trying to determine how to approach it.

I already have the following that is toggling the label:

add_filter( 'option_generate_menu_plus_settings', function( $settings ) {
	if ( is_user_logged_in() ) {
	   $settings['off_canvas_desktop_toggle_label'] = 'Sign Out';
	} else {
		$settings['off_canvas_desktop_toggle_label'] = 'Sign In or Join';	
	}
    return $settings;
} );

So then I guess I would use
add_filter( 'generate_off_canvas_toggle_output', function() {

and in that define the $svg = 'svg definition here';

But how would I then return it with the svg followed by my toggle label already set before in option_generate_menu_plus_settings?

Conceptually I get it, but just not quite sure on the coding to use!

Are you just trying to add something in front of the toggle?

If so something like this should do:
https://generatepress.com/forums/topic/changing-off-canvas-slide-out-menu-icon/#post-1270939

Can you link me to the page in question if that doesn't work?

Thanks!

Not quite, I tried that and it completely replaces my Sign In / Sign Out text that I showed in this code above: add_filter( 'option_generate_menu_plus_settings'

I'm simply trying to put a small svg profile icon in front of the words Sign In and Sign Out.

Link below so you can see the Sign In / Sign Out button I'm referring to :)

Hi Randy,

Actually it can be done with Pseudo element. We could create an empty 20px by 20px box before the label, then insert your SVG as background image

.off-canvas-toggle-label:before {
    content: "";
    height: 20px;
    width: 20px;
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20height%3D%2280%22%20width%3D%22160%22%3E%0D%0A%20%20%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22red%22%20%2F%3E%0D%0A%20%20%3Ccircle%20cx%3D%22120%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22blue%22%20%2F%3E%0D%0A%3C%2Fsvg%3E); 
    display: inline-block;
    margin-right: 10px;
}

Replace the content in url() with your SVG url. You might need to do some google research yourself :)

Perfect! That did the trick :) Thank you Ying!

No problem Randy :)