fluentui-system-icons icon indicating copy to clipboard operation
fluentui-system-icons copied to clipboard

Add base fui-Icon className to all icons

Open Copilot opened this issue 2 months ago • 1 comments

Adds fui-Icon base className to all icons created with createFluentIcon and createFluentFontIcon. This provides a common selector to target all Fluent icons without using bare svg selectors.

Changes

  • constants.tsx: Added iconClassName = "fui-Icon" constant
  • createFluentIcon.ts: Applied base className to all SVG icons
  • createFluentFontIcon.tsx: Applied base className to all font icons
  • icon-factories.test.tsx: Added test coverage for base className on all icon variants

Usage

Icons now render with the base class alongside variant classes:

// SVG icon renders with both base and variant classes
<AccessTimeRegular /> 
// → <svg class="fui-Icon ..." />

// Bundled icon applies to both variants
<BundledIcon filled /> 
// → <svg class="fui-Icon fui-Icon-filled ..." /> (visible)
// → <svg class="fui-Icon fui-Icon-regular ..." /> (hidden)

// Font icon includes both classes
<FontIcon />
// → <i class="fui-Icon fui-Icon-font ..." />

Enables targeting all icons with .fui-Icon selector instead of bare svg for better specificity.

Original prompt

This section details on the original issue you should resolve

<issue_title>Feature: Add fui-Icon className to createFluentIcon</issue_title> <issue_description>### Describe the feature that you would like added

I am proposing to add fui-Icon to all icons. We currently add fui-Icon-<filled|regular> when we bundle icons to use for selectors to hide/show the icon, so we could extend this pattern and add a base className to help narrow selectors down to avoid something like [".${component.iconClassName} svg"]: {}

Additional context

This is currently done in product code because there's no other way to target the svg without using svg directly

Have you discussed this feature with our team

@emmayjiang

Validations

  • [x] Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

Priority

Low</issue_description>

Comments on the Issue (you are @copilot in this section)

  • Fixes microsoft/fluentui-system-icons#901

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Copilot avatar Nov 04 '25 10:11 Copilot

lets hold on with this one till we merge https://github.com/microsoft/fluentui-system-icons/pull/911 and https://github.com/microsoft/fluentui-system-icons/pull/888 ( scheduled for tomorrow ) ty

Hotell avatar Nov 05 '25 16:11 Hotell