[OP-195] Icon improvements

[Jeremy-Walton]

Why?

In order to improve the out of the box Optics experience as well as the ease of customizing icons, changes to how the component was built were needed. Additionally some performance improvements were made to reduce initial page load time

What Changed

• Update the API of icons to match other components and allow for easier customization
• Add an .icon--small modifier
• Extract .icon as a necessary class to be used in conjunction with .material-symbols-outlined. This make a clear separation from what is generally needed for an icon and what is specific for material symbols. This also sets the stage for future icon pack support.
• Add documentation around those changes and how to override
• Simplify the icon font import to only include the weight axis of the variable font.
• Remove the layout shift while icons are loading
• Make an addon to bring back in the full variable icon font to use emphasis and fill.
• Add documentation around how to use the addon or variations of it.

Sanity Check

• Have you updated any usage of changed tokens?
• Have you updated the docs with any component changes?
• Have you updated the dependency graph with any component changes?
• Have you run linters?
• Have you run prettier?
• Have you tried building the css?
• Have you tried building storybook?
• Do you need to update the package version?

Screenshots

Old Icon loading

New Icon loading

[linear]

OP-195 Icon changes + smaller file size icon font default