Block buttons with text on one side and icon on the other

Created by: knownasilya

I found this to be the simplest way, but looking to see if there is a better way to do this:

Accomplishing it via this:

<button class="btn btn-default btn-block" type="button" style="padding: 0.4em;">
  <span class="pull-left">Add Middle Mile</span>
  <i class="fa fa-angle-right pull-right"></i>
</button>

Note: Padding is required, or both sit against the border.

Would be nice if there was a way to do this with the icon on the left or right, with maybe a responsive setup..? Or is the way above the recommended way?