Center svg icon inside button

user_9730610 0
Viewed 1679

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>

enter image description here

twitter-bootstrap svg css
1 Answers

I would try using the CSS flex property.

Add this style to the parent div element:

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