HTML - Icons in buttons trouble - html

Question

The icons inside my buttons are half outside of them for some reason even though there's definitely enough room inside for them. Why is this and how can I fix it? Also, with my css I have the buttons set to be blue but whenever they're disabled, the buttons are white. How can I have them not change their color when they're disabled? Thanks!
tfoot,
thead {
background-color: blue;
color: white;
}
i {
color: white;
vertical-align: middle;
}
button {
background-color: blue;
}
.footertext {
float: right;
padding-left: 10px;
padding-right: 10px;
}
<td colspan="6">
Requests:
<button [disabled]="!isNextValid()" class="form-control" style="width: 50px; height: 25px; float: right;" (click)="nextEmployee()"><i class="fa fa-caret-right fa-2x" aria-hidden="true"></i></button>
<label style="float: right;">{{selectedEmployee+1}} of {{empInfo.length}}</label>
<button [disabled]="!isPreviousValid()" class="form-control" style="width: 50px; height: 25px; float: right;" (click)="previousEmployee()"><i class="fa fa-caret-left fa-2x" aria-hidden="true"></i></button>
</td>

Answer 1

It is because you are using a fixed width on your button element. Instead of a fixed with, adjust the size using padding. This will allow your button to scale properly for its content. This will also keep the label and icon centered properly in the button.
Something like this:
<button [disabled]="!isNextValid()" class="form-control" style="padding: 15px 30px; float: right;" (click)="nextEmployee()"><i class="fa fa-caret-right fa-2x" aria-hidden="true"></i></button>