How to know if icon exists

Question

Suppose you have the following scenario: there is an input box on the left and on the right there is a fontawesome icon.

The icon on the right simply has as name the same as the value of the input box.

This means that a user can type in the input element and have on the right a preview of the fontawesome icon.

But the problem that arises now is twofold

1. Not all icons exists. E.g. there is no icon with the random text 'skdfji'. or not all icons exists in each library (e.g. it does exist in FaSolid but not in FaLight).
2. The icon may exist but not all keystrokes in between result in a valid icon.

e.g. when I try the icon 'house' , I first enter 'h', then 'o', then 'u', then 's' which means that there are 4 mismatches of invalid icons and only on the final keystroke will a valid icon be found.

All of these steps results in the logger of fontawesome going wild.

Besides the annoying log, I would also simply like to know if the icon exists or not because in that way I can give some feedback to the user.

I also tried writing a method to know if the icon exists.

import { findIconDefinition, IconName, IconPrefix, SizeProp } from '@fortawesome/fontawesome-svg-core';

public iconExists(name: IconName, library: IconPrefix): boolean {
  return !!findIconDefinition({ iconName: name, prefix: library });
}
...
otherMethod() {
  if(findIconDefinition('house', 'fal') {
    console.log('Found', 'house');
  } else {
    console.log('Not found', 'house');
  }
}

But Fontawesome will ALWAYS return undefined. Even for existing icons. Would there be someway to just know if it exists?

These are my dependencies

"@fortawesome/angular-fontawesome": "^0.12.1",
"@fortawesome/fontawesome-svg-core": "^6.2.1",
"@fortawesome/pro-duotone-svg-icons": "^6.2.1",
"@fortawesome/pro-light-svg-icons": "^6.2.1",
"@fortawesome/pro-regular-svg-icons": "^6.2.1",
"@fortawesome/pro-solid-svg-icons": "^6.2.1",

Answer 1

The reson findIconDefinition does not work is because angular-fontawesome does not use global icon library from the fontawesome-svg-core and no icons are ever registered there.

If you use icon library approach and register all icons in the library, you can inject the FaIconLibrary service to check whether icon is registered:

class AppComponent {
  constructor(private iconLibrary: FaIconLibrary) {}

 iconExists(name: IconName, prefix: IconPrefix): boolean {
    return this.iconLibrary.getIconDefinition(prefix, name) != null;
  }
}

If you use explicit reference approach, you can attempt to load the icon definition using a dynamic import:

class AppComponent {
  private icon: IconDefinition | null = null;

  constructor(private iconLibrary: FaIconLibrary) {}

  tryLoadIcon(name: IconName, prefix: IconPrefix): boolean {
    import(`@fortawesome/pro-${prefix}-svg-icons/${name}.js`)
      .then((module) => {
        this.icon = module[this.iconName];
      })
      .catch((err) => console.error('Icon does not exist'));
  }
}