Fluent: make icons customizable

[OEvgeny]

Fluent: make icons customizable

Changelog Entry

Changed

• Enabled icon customization in Fluent theme through CSS variables, in PR #5413, by @OEvgeny

Description

This PR allows customization of icons in the Fluent theme by transitioning from hardcoded SVG components to mask-based images. This change enables developers to:

Design

The implementation uses the MonochromeImageMasker component which leverages CSS masks instead of inline SVGs. Some additional tweaks were made:

1. Added a new CSS variable --monochrome-image-masker__mask-image that falls back to the default icon if not specified
2. Added consistent sizing and positioning through updated CSS properties
3. For FLuent anchor icon size to the font size and color

Specific Changes

• Converted all icon components to use MonochromeImageMasker:
  • AddDocumentIcon
  • AttachmentIcon
  • InfoSmallIcon
  • SendIcon
  • TelephoneKeypadIcon
• Improved MonochromeImageMasker styles with better positioning and sizing
• Added icon customization test
• Updated CSS modules to properly handle new icon structure

• 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)

[compulim]

Nitpick.

[compulim]

Nitpick.