I want to change the folder for categories on my blog to my own custom SVG icon

Hi there,

you can use the generate_svg_icon filter. Heres the snippet for changing the Categories icon:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'categories' === $icon ) {
        $svg = 'your_svg_HTML_goes_here';

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

    return $output;
}, 15, 2 );

In the above you need to add your SVG HTML here:

$svg = 'your_svg_HTML_goes_here';

For reference here is a complete example of that filter:
https://docs.generatepress.com/article/generate_svg_icon/

Thank you David, how do I implement this? I added the code in the Additional CSS in the customizer and it responded that markup was not allowed. So I created an element hook to show only on the blog. Unfortunately whether its in the header or footer the code just displays without changing the icon.

Code I used;

add_filter( 'generate_svg_icon', function( $output, $icon ) {
if ( 'categories' === $icon ) {
$svg = '<svg xml:space="preserve" style="enable-background:new 0 0 512 512;" viewBox="0 0 512 512" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1">
';

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

return $output;
}, 15, 2 );

Hi Karissa,

The code is PHP, you can use either of the methods introduced in this article to add PHP:
https://docs.generatepress.com/article/adding-php/

Thank you David and Ying, is there a CSS version? I copied the code over on the code snippets plug in and am still unsuccessful in changing the icon. I also have PNG file of the icon I'd like to change it to.

That snippet should work - but your SVG code above looks incomplete.
Try opening the SVG image on this site;

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

it will provide you with clean HTML.
Give that a try and if that fails we can look at alternatives.

Thank you both! The icon has changed. I used the plugin Code Snippets to achieve this along with the code provided.

A different issue about the same icon is the alignment is not inline with the text, I believe this is a problem with the icon but is there a solution that you know of?

Thanks so much again.

Hi Karissa,

You have this custom CSS that's causing the misalignment.

/* Mobile icon size */

.gp-icon svg {
    height: 1.7em;
    width: 1.7em;
}

You can try changing the height value to auto or just completely omit it. The SVG you use has an attribute for aspect ratio anyway. :)

Ok, I used that CSS to increase the size of the hamburger menu I added in

align-content

And its centered now!

Ok, I used that CSS to increase the size of the hamburger menu I added in

align-content

And its centered now!

Adding this broke the CSS for height and that effectively omitted the height styling. :)

You may want to consider using separate selector some SVG icons so the styling applies specifically where you want it to.

Example: styling the category icon specifically.

.entry-meta .gp-icon.categories svg {
    height: auto;
    width: 1.7em;
}

I see, thank you! I've tried to locate the mobile menu icon from the inspect tab but the closest I could find was .gp-icon svg. How do I find the area for just the mobile toggle?

You can go with either span.gp-icon.icon-menu-bars svg or button.menu-toggle .gp-icon svg.

Thank you! I'm all good now.

Nice one. No problem. Let us know if you need further help. :D