CSS make inline-block fill parent

Question

Я пытаюсь поместить значок SVG и текст в той же строке в меню. Я изменил display от block до online-block, но текст больше не заполняет родителя. Проблема возникает, когда я пытаюсь ввести hover элемент из меню, он активируется только по тексту, и я хочу на всем row.

#menu { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 200px; 
    background-color: #f1f1f1; 
    position: fixed; 
    height: 100%; 
    overflow: auto; 
} 

svg { 
    width: 24px; 
    height: 24px; 
    text-align: center; 
    vertical-align:middle; 
} 

li a { 
    display: inline-block; 
    color: #000; 
    padding: 8px 0px 8px 16px; 
    text-decoration: none; 
    vertical-align:middle; 
    white-space: normal; 
} 

li a.active { 
    background-color: #4CAF50; 
    color: white; 
} 

li a:hover:not(.active) { 
    background-color: #555; 
    color: white; 
} 

HTML часть

<ul id="menu"> 
     <li><svg viewBox="0 0 24 24"> 
      <path fill="#000000" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /> 
      </svg><a class="menux1" href="www.google.com">Home</a></li> 
</ul> 

Answer 1

Я изменил структуру HTML немного, это результат:

#menu { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 200px; 
 
    background-color: #f1f1f1; 
 
    position: fixed; 
 
    height: 100%; 
 
    overflow: auto; 
 
} 
 

 
svg { 
 
    width: 24px; 
 
    height: 24px; 
 
    text-align: center; 
 
    vertical-align:middle; 
 
} 
 

 
a li { 
 
    color: #000; 
 
    padding: 8px 0px 8px 16px; 
 
    text-decoration: none; 
 
    vertical-align:middle; 
 
    white-space: normal; 
 
} 
 

 
a.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
} 
 

 
li:hover:not(.active) { 
 
    background-color: #555; 
 
    color: white; 
 
} 
 

 
a { text-decoration: none; }

<ul id="menu"> 
 
     <a class="menux1" href="www.google.com"><li><svg viewBox="0 0 24 24"> 
 
      <path fill="#000000" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /> 
 
      </svg>Home</li></a> 
 
</ul>