Can someone ELI5 adding svg icon (and associated link) into header-nav?

[gammacray]

I've got the correct entries in config.yml and navigation.html - but no matter what I've tried as far as importing my own svg icon - name.svg into assets/icons - it won't show up on the rendered site page. The link itself shows up no problem but where the icon is supposed to be is just blank. I have no permissions issues nor does npm/jekyll print any errors when I publish the site (nor run locally).

I've never worked with svg before, so a lot of the documentation out there is going into sprites and GULP workflow and inline this and layer that which I don't understand. I just want to throw an icon into /assets/icons and stick it in the header-nav.

Things I've tried;

• I've opened the svg file in atom and copied verbatim the syntax over from existing icons in the folder which work
• Imported several different icons and tried them all in varying combinations
• I've renamed another icon that came with the theme and it renders correctly

There's something going on with my understanding of svg syntax but I have no idea what it is. I rarely work with image formats of any kind.

Thanks!

[gammacray]

Okay so I've got a little progress but I can't figure out why the viewport attribute isn't working. See attached comparison of the 'about' svg working as expected but the 'tags' icon I'm trying to load isn't scaling properly, even though it's referenced.

The 'tags' icon svg I'm trying to use has the correct viewport 0 0 16 16, and I've tried to issue height/width attributes as well and they have no effect. The icon is breaking because it's trying to scale too large but I can't figure out how to adjust that.