showMissingIcons = false does not hide the missing icon indicator when icon name is missing

[robmadole]

Describe the problem

Changing this setting:

<script>FontAwesomeConfig = { showMissingIcons: false}</script>

Still shows the missing icon indicator.

What did you expect?

Setting showMissingIcons to false should hide any missing icon indicator.

What version and implementation are you using?

Version: 5.0.8
Browser and version: all

• SVG with JS
• Web Fonts with CSS
• SVG Sprites
• On the Desktop

Reproducible test case

https://codepen.io/robmadole/pen/EEVxBX

Bug report checklist

• I have filled out as much of the above information as I can
• I have included a test case because my odds go way up that the team can fix this when I do
• I have searched for existing issues and to the best of my knowledge this is not a duplicate

[mlwilkerson]

I've tracked this down. It's due to this check in dom.js in findIcon():

} else if (iconName && prefix && !config.showMissingIcons) {

In your repro, iconName is null, which makes sense, because you've given it only class fas fa-fw. And fw is in our RESERVED_CLASSES list, so isReserved() returns true and thus getIconName() returns null in the class parser.

[mlwilkerson]

So this seems to be a special case where a reserved class is used without another icon name. What should the behavior be?

[robmadole]

Ah, ok. That makes sense. I think we can come back to this once 5.1 is out @mlwilkerson. This is not high enough in priority to tackle it right this moment.

[mlwilkerson]

OK, when the time comes to fix it, we have a regression test ready to enable here:
integrations/regressions/issue-12581

[markmaruska]

+1

[mlwilkerson]

Also, there is a use case for doing <i class="fa fa-fw"></i> that reportedly worked in version 4, and demonstrably still works in v5, when using Webfonts with CSS. See this codepen for a demo. So this could be considered a regression from v4, the fact that v5 SVG with JS doesn't work.

[kevinwhoffman]

I'm developing with FA5 in a WordPress plugin, so it's important that I am able to target which elements I am affecting through my plugin in case other plugins are still using FA4.

Here is the config I'm using:

import fontawesome from '@fortawesome/fontawesome';

fontawesome.config = {
	familyPrefix: 'myprefix',
	showMissingIcons: false
};

Here is an example of two elements that are both being affected by FA5 as configured above.

<i class="fas myprefix-camera"></i> // My FA5 icon working as expected.
<i class="fa fa-camera"></i> // Another plugin's FA4 icon that is replaced with the animated missing icon. This should not happen.

I believe this bug is the reason why the fa fa-camera element is being replaced. I just wanted to confirm it and share why it's important within a WordPress context.