Fluent V9 Button: How do I remove the margin-right styling from the icon span when rendering a button with and icon and children?

[svalenciasan]

<Button icon={<AddFilled />} appearance='primary' shape='circular'>
      <span style={{ display: 'none' }}>invisible child</span>
</Button>;

I want the margin of the span used for rendering the svg icon to be removed. Not sure how to do this though.

[pradeept95]

Hi @svalenciasan ,
You can customize icon behavior using slot api. following example might help you.

import { Button, makeStyles, shorthands } from '@fluentui/react-components';
import { AddFilled } from '@fluentui/react-icons';

const useButtonStyles = makeStyles({
  buttonIcon: {
    ...shorthands.margin(0),
  },
});

export const ButtonExample = () => {
  const styles = useButtonStyles();

  return (
    <Button
      icon={{
        children: <AddFilled />,
        className: styles.buttonIcon,
      }}
      appearance="primary"
      shape="circular"
    >
      <span style={{ display: 'none' }}>invisible child</span>
    </Button>
  );
};

You can read more how you can customize components using slots here => https://react.fluentui.dev/?path=/docs/concepts-developer-customizing-components-with-slots--page