feat: new icons subsystem

[OEvgeny]

Fixes #

Changelog Entry

• Enabled icon customization in Fluent theme through CSS variables, in PR #5413, by @OEvgeny
  • Reworked, enabled in Web Chat, in PR #5502, by @OEvgeny

Description

This continues the work on modernizing how Web Chat handles icons via a dedicated icon component and CSS-modules. Now almost all icons are defined in CSS which makes DOM lighter and easier to customize.

Design

As Fluent design system is independent from Web Chat, we have two different components handling both icon sets bootstrapped by the createIconComponent utility.

The utility handles the heavy lifting of passed props validation at runtime.

Specific Changes

• migrated most of the icon to ComponentIcon approach
• minor tests updates
• updated attachment icon to address a TODO item
• simplified modal close button layout
• fixed minor styling issues with Fluent icons color
• updated snapshots

-

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)