Cannot use strings in the @Input key, only SvgIcons type

[albinidrizaj]

I'm submitting an issue with the key input of svg-icon component. It does not allow me to use strings, requires a type of SvgIcons to be used. I was using version 4.x.x until now, so I know that it worked back then

[ x] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Using strings as inputs in the key input of svg-icons component is not allowed

Expected behavior

Allowing strings to be used in the key input of svg-icons component

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Angular version: X.Y.Z


Browser:
- [ x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

For Tooling issues:
- Node version: v16.17.0
- Platform:  Mac

Others:

[NetanelBasal]

Reproduce on stackblitz, please

[wgd3]

I thought I had hit this same issue on a fresh project using 7.0.0, but it turned out that key accepts strings just fine - it was the capitalization of SvgIcons type and the original SVG file names that was the issue for me. Adding this in case anyone else sees this behavior.

---

I didn't "reproduce" this per se, as Stackblitz won't let me run scripts from package.json in their Angular templates, but I added the SVG and generated icon to this instance: Stackblitz

I hit this same behavior recently, and in the course of generating the Stackblitz realized that the problem went away if I renamed my source SVG files to use all lowercase letters in the filename (Fire.svg -> fire.svg).

I ran the following commands on macOS and it resolved all my issues:

$ brew install rename
$ rename -fc /path/to/svgs/*

# I use yarn in my current project, but however you launch package.json scripts
$ yarn run svg

After the above the SvgIcons type used lowercase strings, which matched the lowercase strings for the name property in generated TS icon files.