Add base fui-Icon className to all icons
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-Iconto all icons. We currently addfui-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.
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