Icon Component Update

[sreidthomas]

This PR is for updating the Icon Component that exists in the experimental by:

• Moving Icon from experimental to stable folder
• Adding bootstrap icons and the backwards compatibility use of font awesome (some icons do not have bootstrap icons)
• Adding new name / label attributes
• Keeping the old data-icon, data-size and is-highlighted attributes for backwards compatibility
• The color and size of the icon should be determined by the color and font-size style properties (either applied directly to the icon element or its parent). See an example here: https://shoelace.style/components/icon#colors

[maxatdetroit]

@sreidthomas I removed myself from review for now since I think you're still working on this. When you're ready for review, go ahead and re-add me as a reviewer.

[maxatdetroit]

In addition to the inline comments below, how are you testing this? If you're testing manually using storybook, then would you please list the scenarios you tested on the PR and include a video of the testing?

Note: There are a lot of scenarios to test given the scope of changes here. Make sure to test all the new combinations. E.g.

• data-size and lightDOM font-size are set; what happens? only one is set; what happens? etc.
• data-icon and name attribute are set; what happens? only one is set; what happens? etc.
• ... same thing with library attribute.

Also, please see best practices (4) and (6) in #201 . We should update the Icon to reflect JS properties from the name attribute and improve our storybook documentation.

[maxatdetroit]

The property implementation needs to be tweaked slightly, otherwise this is on the right track.

[jedgar1mx]

Need story to review inheritance on both size and color

[maxatdetroit]

When I try to view the inheritance stories for testing I'm receiving undefined errors in Storybook. Is this just on my end, or are you seeing the same issues @sreidthomas?

I also left some comments to fix before we merge this in.

[sreidthomas]

When I try to view the inheritance stories for testing I'm receiving undefined errors in Storybook. Is this just on my end, or are you seeing the same issues @sreidthomas?

I also left some comments to fix before we merge this in.
I am getting the same. I added this update as per Edgar's review and I have not been sure how to get it to work without the icons being undefined.

[sreidthomas]

When I try to view the inheritance stories for testing I'm receiving undefined errors in Storybook. Is this just on my end, or are you seeing the same issues @sreidthomas?

I also left some comments to fix before we merge this in.
I am getting the same. I added this update as per Edgar's review and I have not been sure how to get it to work without the icons being undefined.

THIS IS FIXED

[maxatdetroit]

It looks like the color is being inherited but not the size. Notice in the video that 48px size and 64px have the same sized icon. Do you know what the issue is? Would you please see if you can fix it? Let me know if you want a hand.

Screen.Recording.2025-05-06.102319.mp4

[sreidthomas]

It looks like the color is being inherited but not the size. Notice in the video that 48px size and 64px have the same sized icon. Do you know what the issue is? Would you please see if you can fix it? Let me know if you want a hand.
Screen.Recording.2025-05-06.102319.mp4

Yeah I'm not sure if you remember but we spoke about this and I couldn't figure out why the size was not being inherited only the color. I did ask for help with this @maxatdetroit