I allow users on my website to create links and append Font Awesome icons to it. They have the freedom to pick from any free icon and as such have to write something like 'fab fa-instagram'.

Since they have this freedom, if there's any typos or they input something that doesn't exist, this error is thrown.

This is how the code is like:

<font-awesome-icon :icon="link.link_icon" @error="setBlank" />

Is there a way I could catch the :icon error and swap the wrong icon with a string or something like that?

I tried @error but it apparently only works for :src in images.

CodePudding user response：

Sadly, the component itself does not emit an error event when an icon can't be found. I'd suggest to create an issue in the repository for that see this issue.

That means that you are only down to checking the DOM, e.g. the child elements of the component and see if they exist or not to determine whether the icon has been resolved correctly or not. This can be done by using a ref on the icon component and check the children through the native DOM API.