How to use a primary button with an icon?

[mike-morr]

If I am reading the documentation right, I can only add an icon to hero or command buttons. So this is likely by design. Is there a way I can have the ButtonType.primary button look and have an icon?

I tried this:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Button, ButtonType } from 'office-ui-fabric-react/lib/Button';

const MyPage = () => (<div><Button icon="personAdd" buttonType={ ButtonType.primary }>I am a button.</Button></div>);

ReactDOM.render(<MyPage />, document.getElementById("content") as Element);

[dzearing]

Thanks for reporting.

So my 2c here is that we should really not have an Icon button, but instead just make the icon work with any button style. I think that's what you were expecting. We can fix that. We are going to go through a gutting of the Fabric component css, and in that process can re-evaluate the styling that's causing problems (I tried your scenario, and the icon is being hidden somewhere in the Fabric css.)

But right now the button is also pretty flexible. You can throw anything you want into a button, but you may have to adjust its css appropriately. Example:

<Button className='my-Button' buttonType={ ButtonType.primary } title='Star' ariaLabel='Take a star'>
  <i className='ms-Icon ms-Icon-star' />
  <span>I am a button.</span>
</Button>

.my-Button {
  .ms-Icon {
    margin-right: 4px;
  }
}

[mike-morr]

@dzearing Thank you for the rapid response. Yes, that is what I was expecting at first glance, that I could just add an icon to any button. Would definitely like to see it work that way.

Thanks for providing the sample. That works great!

[dzearing]

There is now an icon button.

[approots]

Buttons having elements inside them seem to have their height reduced. Button text centering seems a little off too. http://codepen.io/anon/pen/ggVpxJ?editors=0110#anon-login