Custom icon in InfoLabel

[15MariamS]

Library

React Components / v9 (@fluentui/react-components)

Describe the feature that you would like added

I'd like to add a custom icon instead of the info icon with the InfoLabel component. Specifically, I want the icon to be a Sparkle, for AI-generated content.

Have you discussed this feature with our team

Not yet

Additional context

Here's what my own implementation looks like today:

Validations

• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Priority

Normal

[miroslavstastny]

You can override the default icon by passing it as a children to infoButton slot:

import {
  Sparkle16Regular,
  Sparkle16Filled,
  bundleIcon
} from "@fluentui/react-icons";

//...

const Sparkle16 = bundleIcon(Sparkle16Filled, Sparkle16Regular);

//...

return (
  <InfoLabel
    info="This is example information for an InfoLabel."
    infoButton={{ children: <Sparkle16 /> }}
  >
    Example label
  </InfoLabel>
);

Keep in mind that if you override the icon, it will be your responsibility to use the correct size of the icon. InfoLabel will NOT scale the icon based on the size prop.