Buttons with icon
Using icons in buttons can help to enhance the UX. Add an icon inside any style button with a label. Place the icons before label in order for users to see them first.
Add EOS-icons or material design icon inside any style of button to create a button with an icon.
<button class='btn btn-default'>
<i class='material-icons md-18'>autorenew</i>Button
</button>
<button class='btn btn-primary'>
<i class='material-icons md-18'>autorenew</i>Button
</button>
<button class='btn btn-primary'>
<i class='material-icons md-18'>autorenew</i>Button
</button>
<button class='btn btn-danger'>
<i class='material-icons md-18'>autorenew</i>Button
</button>
Only icon buttons
If an icon button has no label be sure to use a tooltip to offer some short explanation of the buttons purpose.
You can create an icon-only button, by adding an EOS or Material design icon inside any style of button without a text label.
<button class='btn btn-default'>
<i class='material-icons md-18'>add</i>
</button>
<button class='btn btn-primary'>
<i class='material-icons md-18'>create</i>
</button>
<button class='btn btn-outline-primary'>
<i class='material-icons md-18'>autorenew</i>
</button>
<button class='btn btn-danger'>
<i class='material-icons md-18'>delete</i>
</button>