Icon vertical alignment and size issues

It appears that the icons, when paced inside dropdowns and butons, is slightly off vertically (baseline is not quite lined up with the font), as well as when icons are placed inline with text.

A fix we have implemented is as follows:

.bi {
  vertical-align: -0.125em;
  margin-bottom: calc(-0.125em / 2);
}

// Make icons slightly larger (aesthetically) in input group prepend/append
.input-group {
  .input-group-text {
    .bi {
      transform: scale(1.5);
    }
  }
}

// Make icons slightly larger (aesthetically) in buttons and dropdowns
.btn,
.dropdown {
   .bi {
    transform: scale(1.5);
    // reset the bottom margin from above
    margin-bottom: 0;
  }
}

Before

After

[mariusa]

The fix that works for me is moving the icons slightly up, not more down:

 vertical-align: 0.125em;

Original bootstrap 4.x, no change, using icon font 1.3.x

With vertical-align: 0.125em;

[passananteg]

If you add the class d-flex on a button you can add the class align-items-center to the icon and it will be aligned to the middle