SVG icon (button) in menu

I wanted to implement a button (SVG ICON BUTTON/ANCHOR) in the Hugo menu, which I am using by default. How can I achieve that? I want to have that to serve as a toggle button between dark and night mode.

The default I’m using in config.toml is

[[menu.main]]
    identifier = "about"
    name = "About"
    pre = "<i class='fa fa-heart'></i>"
    url = "/about/"
    weight = -110

P.S - I do not know what this pre (favicon) thing is, I just copied it from the docs and didn’t remove it since it never showed up

This pre-thing is your icon :wink: Checkout fontawesome. They define some css and it shows the icon. I don’t think their SVG version is working this way so just look it up for some info about what other options you have.

I myself do the following when I need SVG icons (and SVG icons in the navigation specifically, you can use the partial anywhere):

Step 1: I put the image into a partial. It’s not an image, it’s XML with info how to render the image.

Step 2: I load the image via navigation template (line 24 is where it hits). By using it as partial the whole XML of the image is included in the resulting page. No image tag needed.

Step 3: I add some styling

(note the lines where it says path and fill - that’s the place where you would add a different color to the icon)

Step 4: In my config.toml in the menu setup I add pre = "icons/horse.svg". This way this whole setup loads the icon from layouts/partials/icons/horse.svg

Step 2, Line 24 can be rewritten into {{ partialCached "icons/somename.svg" . }} and it loads any icon anywhere you want. This specific case needed to have that little print hack so the pre value of the menu could be used.

Hope that helps :slight_smile: have fun digging into your theme.

1 Like

OMG @davidsneighbour you’ve been a great help every time! Thank you so much, I tried doing it, but it did not work as expected, I wanted to create a toggle the svg icon on click.

P.S - I’ve messaged you my issue, can you please look into it?
Thank you