Custom icon not showing up in the navigation bar

[CharlieBros]

Hello guys!

First of all, I just wanna say thank you for the incredible work done with this project, you peeps rock!

Now, with the issue:

I'm currently doing an internal KB for my work, due to this, I have the need to add a few custom icons, for example, the Windows 11 logo.

I followed the custom icon guide and the icons work perfectly as emojis, however, I'm doing an article that requires a custom icon to show up in the navbar.

First, I had an issue with mkdocs not being able to run, but after following the solution in this issue #3629 I was able to run mkdocs again (BTW, the solution in this issue is not mentioned in the custom icons tutorial section in the Material KB)

However, when I type this in the frontmatter:

---
icon: kb/popup
---

It shows up like this:

If I change the icon to one that comes by default, it works perfectly, like this:

The icon loads correctly when used as an emoji, what gives?

[kamilkrzyskow]

Hi @CharlieBros,
the underlying logic for including emojis in Markdown content and including the icons in the HTML nav via templates is different.
If the site gets built without errors, then the templates do load the file and try to include it in the HTML nav.
But on the screenshot it creates a gap + seemingly removes the nav entry.

For example the icons in HTML content are loaded like this:

and links in nav are this:

So there is no twemoji wrapper in the nav, and the 0 0 24 24 value only defines the view "zoom", but it likely doesn't limit the size.
I would guess that the issue is with the raw size of your custom svg, which causes this large gap in the nav.
I would have to look at the HTML to get a clearer picture.