Bootstrap 3 - Align font-awesome icon inside button vertically

Bootstrap 3 - Align font-awesome icon inside button vertically

I am trying to align some font-awesome arrow vertically inside two
Bootstrap buttons.
Actually both the text and the icons should be vertically aligned in the
middle of the button.
If the text inside falls in a single line or wraps in multiple ones the
arrow icon should always adjust to the middle of the total height of the
button, if that makes sense.
I've been trying to sort this one out for hours now but for the life of me
I can't figure this one out.
Here's the markup:
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<button type="button" class="btn btn-block btn-foo1"><span>
this is <br>button<br>one</span><i
class="icon-angle-right"></i></button>
<button type="button" class="btn btn-block
btn-foo2"><span>this is button two</span><i
class="icon-angle-right"></i></button>
</div>
</div>
and here's a jsFiddle with what I currently have. Please note that the red
background of the icons should touch the edges of the button
(top/bottom/right) as opposed to what it is now.