Center svg icon inside button

Question

I'm currently facing the problem, that the icon inside my button won't center vertically. Somehow the svg also seems to be sticking outside of the span surrounding it. How can I fix this? This is my code:

<button class="btn btn-block btn-secondary dropdown-toggle" type="button"
 id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      XS
      <div class="select-arrow-icon">
           {% sw_icon 'arrow-down' %}
      </div>
</button>

Answer 1

I would try using the CSS flex property.

Add this style to the parent div element:

#dropdownMenuButton {
  display: flex;
  align-items: center;
}