Fluentui: Allow rendering of icon on either side of text in buttons

Created on 14 Sep 2018  路  2Comments  路  Source: microsoft/fluentui

Describe the feature that you would like added
When adding a button, such as an ActionButton, I can specify an iconName in the Icon props, but I would like to be able to render the icon on the right for some buttons. For example, if I have previous and next buttons that use the Previous and Next icons, I want the Next icon rendered to the right of the text "Next" that I place in the button.

What component or utility would this be added to
This would be added to the ActionButton component, and I guess other button components that support IconProps.

Have you discussed this feature with our team, and if so, who
I have not.

Additional context/screenshots
previous_next aspx
This is what I was referring to. I would like that Next icon to display to the right of the "Next" text, and I'd like to be able to do that with the button components like ActionButton, maybe by setting a 'iconSide' property to 'right' or something, maybe using an enum for that value.

Author Feedback By Design

Most helpful comment

You can already do this in one of two ways. You can add menuIconProps (though the menu icon is styled smaller so this might be annoying), or you can simply flip the flex direction on the flexContainer

https://codepen.io/micahgodbolt/pen/zJLdoV?editors=1010

All 2 comments

You can already do this in one of two ways. You can add menuIconProps (though the menu icon is styled smaller so this might be annoying), or you can simply flip the flex direction on the flexContainer

https://codepen.io/micahgodbolt/pen/zJLdoV?editors=1010

Reversing the flex direction works for me. I was unfamiliar with CSS flexbox. Thank you.

Was this page helpful?
0 / 5 - 0 ratings