missing icons render a tall, skinny svg element

I believe this is because the svg has no viewbox? The other icons have a viewbox="0 0 512 512". Ideally a missing icon wouldn’t disrupt the flow of the page like this.

Edit: actually it’s the .svg-inline--fa class where a 1em height comes from. So maybe a missing SVG should have some kind of default classes?

[mlwilkerson]

Yes, @jrjohnson when using the autoReplaceSvg functionality, where you place <i> tags and let our code pick those up and translate them into <svg>s, missing icons look fancy, like this: https://jsfiddle.net/mwilkerson/hpw53Lzb/2/

So there’s precedent there for showing that missing icon.

That was my initial suggestion above to @bgentry, to show the same “missing icon” icon. The alternative would be to leave it blank in the page and just log a message to the console.

I don’t have a really strong preference here myself, and I could see good reason to go either way.

But we definitely don’t want the current behavior. So I’ll put in a fix for that. For now, I’ll leave it blank and log to the console.

[mlwilkerson]

No, that wasn’t quite what I was suggesting above, however, that’s pretty close to what I had intended to be the current behavior. Currently, it logs to the console and puts out an empty SVG. The bug, as you’ve noted, is that the empty SVG messes up the flow.

So I can just make it so that the page flow is not disrupted and keep the logging as-is.