Add icon component to the toolkit

[Mehak261124]

This pull request introduces a new Icon component in the toolkit, extending the FASTElement from Microsoft's Fluent Design System (FAST). The component is designed to be leaner and more streamlined compared to the existing LabIcon class, ensuring a clearer implementation and easier usage.

Key Features:

Inheritance from FASTElement: Leverages the extensibility of FASTElement to integrate seamlessly with the Fluent Design System.
Simplified Icon Registration: Enables registering icons dynamically without using the new syntax, enhancing developer convenience.
Direct Use in Web Applications: Icons can be incorporated using the "@" syntax, simplifying their usage across various web applications.
Non-Interactive Design: The icon does not interact with or modify its container, maintaining a clear separation of concerns.
React Integration: Includes an encapsulated React component version of the icon, maintaining consistency and usability across our React-based projects.
Technical Details:
New Folder and Files:

Created a new directory packages/components/src/icon/ containing:
index.ts: Defines the Icon class and handles icon registration.
icon.stories.ts: Provides Storybook stories to demonstrate the icon implementations and their variations.

Implementation:

Utilized @microsoft/fast-element for custom elements.
The Icon class utilizes a static map to manage icon registration and retrieval.
SVG content is dynamically loaded based on the name attribute, with a default icon fallback.

Fixes #119

[github-actions]

👈 Launch a Binder on branch Mehak261124/jupyter-ui-toolkit/toolkit-icon

[fcollonval]

Thanks @Mehak261124

This looks great. I added documentation to improve the code and looking at the LabIcon code in JupyterLab I realized we need to make two changes:

• Add a method static setDefaultIcon(svgStr: string): void to be able to customize the default icon.
• Allow for registration of icon with an existing name. In such case, it should warn about that: console.warn(`Redefining previously loaded icon svgstr. name: ${name}, svgstrOld: ${icon.svgstr}, svgstr: ${svgstr}`);
  And it should rerender all existing icons; something like that may work:

  document.querySelectorAll(`jp-icon[name="${name}"]`).forEach(node => { node.name = "";
  node.name = name;
  });

[fcollonval]

Thanks @Mehak261124

The code looks good. I have some suggestions, mainly to test changing the icon definition.

[fcollonval]

Thanks @Mehak261124

The remaining failures are due to flakiness.