How to make buttons with svg icons (html structure inside)?

Question

css

<button class="button-menu">

<span class="menu-icon">
<svg width="40" height="40" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="28" height="28" rx="14" fill="#7B82EC"/>
<rect x="7" y="8" width="14" height="2" rx="1" fill="white"/>
<rect x="7" y="18" width="14" height="2" rx="1" fill="white"/>
<rect x="7" y="13" width="14" height="2" rx="1" fill="white"/></svg>
</span>
<span class="button-libel">Все разделы
</span>
</button>

The main problem is with the alignment of the icon and button text in the center. It is necessary that the button looks correctly in all popular browsers.
Of particular interest are the css properties display, position.
I started to do, but I can not agree on the image and the inscription. And, yes, the final size of the button should be 40 pixels high.
https://jsfiddle.net/LaraSka/h85zt1xu/

Answer 1

I would put the svg in the background before and then use position: absolute to position the icon relative to the text in the button. And the text is aligned in height using line-height

Answer 2

I wrote a solution for you in a previous question. Use align-items center and you'll have everything centered.

Answer 3

Here it works!!!

<button class="button-menu">
  <span class="menu-icon">
    <svg width="40" height="40" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="28" height="28" rx="14" fill="#7B82EC"/>
      <rect x="7" y="8" width="14" height="2" rx="1" fill="white"/>
      <rect x="7" y="18" width="14" height="2" rx="1" fill="white"/>
      <rect x="7" y="13" width="14" height="2" rx="1" fill="white"/>
    </svg>
  </span>
  <span class="button-label">Все разделы</span>
</button>
<style type="text/css">
 .button-menu {
   display:flex;
   padding:0;
   margin:0;
   border:0;
   border-radius:40px;
   background-color:#7b82ec;
   overflow:hidden;
 }
 .button-label {
   line-height:40px;
   text-transform:uppercase;
   color:white;
   margin:0 5px;
   font-size:20px;
 }
</style>