Как верстать кнопки с svg иконками (html структура внутри)?
Смотреть в сторону flex:
.button-menu {
 ...
 display: flex;
 align-items:center;
 }
Вот это работает!!!

<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>