If you scroll to the right a bit and look at line 1, the part I added was width="25" height="25". It looks like Font Awesome icons don’t come with dimensions defined inline (it isn’t necessary if you’re embedding SVGs directly in HTML).

If you look at the line 2, you can also see the fill definition, you can change this to a hex color.

Something interesting is that I only changed my html for the “home” link, which is the first of my five links in the global nav bar. It didn’t work. Then about 30 minutes laters I looked at the site and it was working! So I’ve updated all of my other links to follow the same convention. Same issue… not working… but I’m wondering if some time passes and they will load as well ¯_(ツ)_/¯

While the Home icon seems to be working… for all of the links I’m getting an error…

Right, using SVGs as a linked image unfortunately means you can’t control the fill color. As you discovered, CSS filters are one way to overcome this.
What was missing was the height/width attribute within the SVG file. If you open an SVG in a text editor, you’ll see this:
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-prefix="fas" data-icon="home" class="svg-inline--fa fa-home fa-w-18" role="img" width="25" height="25" viewBox="0 0 576 512">
<path fill="currentColor" d="M48…

Note that you should aim to figure out how to use the JS/Handlebars helper functions in the OP, they automatically handle renamed FontAwesome icons. When using SVGs directly, you’re going to need to track down the icons yourself. As you can see in code above, the edit icon in FA5 is called pencil-alt in the <use> tag. (For other renames, refer to the FontAwesome upgrade guide.)

Also note that the class to include in the svg element is fa, not fas.

This component relies on the new interface for adding long lists that Joffrey created recently
Because of that, you need an up-to-date beta-branch Discourse install to use it.
This is a theme component that will allow you to build a header menu - with submenus - using plain text!
Repository link
https://github.com/hnb-ku/discourse-header-submenus
Preview:
https://theme-creator.discourse.org/theme/Johani/header-submenus
Samples
Desktop
[1][2]
Mobile
[3]
Settings
Ther…

You can install these two components on your site, and/or inspect their code to see how they use JS to insert elements on the page.

YOWZA! That’s not good to have all the extra bytes. Is there a way to prevent it from loading the SVG version as well? It was just so much easier to do this approach, and I just wanted my icons back up as quick as possible.