How shall I place a icon(Material Icon) and text in a same line in the vertical menu bar
<p>How do I place an icon (Material Icon) and text in the same line in the vertical menu bar. I don't want to use a table, as I won't be able to hover over both simultaneously <a href="https://i.stack.imgur.com/m88hx.png" rel="nofollow noreferrer">You can see only one of them is selected when hovering</a></p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons"        rel="stylesheet"&gt;

&lt;style&gt;
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #5A7A88;
}

li a {
display: block;
color: lightgrey;
padding: 8px 0 8px 16px;
text-decoration: none;
}


li a:hover {
background-color: #7D8D96;
color: white;
}


.menu {
 width: 240px;
 height:100%;
 position:absolute;
 background:#5A7A88;
 left:0px;
 transition: all .3s ease-in-out;
 -webkit-transition: all .3s ease-in-out;
 -moz-transition: all .3s ease-in-out;
 -ms-transition: all .3s ease-in-out;
 -o-transition: all .3s ease-in-out;
  }

 .menu-icon {
 padding:10px 20px;
 background:#5A7A88;
 color:#987D3E;
 cursor:pointer;
 float:right;
 margin-top:4px;
 border-radius:5px;
 }

 #menuToggle {
 display:inline;
 }

 #menuToggle:checked  ~ .menu {
 position:absolute;
 left:0px;
 }
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;


 &lt;nav class="menu"&gt;
 &lt;ul&gt;
 &lt;table&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;li&gt;&lt;a class="material-icons"&gt;add&lt;/a&gt;&lt;/li&gt;&lt;/td&gt;

 &lt;td&gt;&lt;li&gt;&lt;a href="#home"&gt;APPLICATION INFO&lt;/a&gt;&lt;/li&gt;&lt;/td&gt;

 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;li&gt;&lt;a class="material-icons"&gt;add&lt;/a&gt;&lt;/li&gt;&lt;/td&gt;

 &lt;td&gt;&lt;li&gt;&lt;a href="#home"&gt;DEVICE INFO&lt;/a&gt;&lt;/li&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;li&gt;&lt;a class="material-icons"&gt;add&lt;/a&gt;&lt;/li&gt;&lt;/td&gt;

 &lt;td&gt;&lt;li&gt;&lt;a href="#home"&gt;PROCESS LIST&lt;/a&gt;&lt;/li&gt;&lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;&lt;li&gt;&lt;a class="material-icons"&gt;add&lt;/a&gt;&lt;/li&gt;&lt;/td&gt;

 &lt;td&gt;&lt;li&gt;&lt;a href="#home"&gt;REMOTE CONTROL HISTORY&lt;/a&gt;&lt;/li&gt;&lt;/td&gt;
 &lt;/tr&gt;





  &lt;td&gt;&lt;li&gt;&lt;a class="material-icons"&gt;add&lt;/a&gt;&lt;/li&gt;&lt;/td&gt;


 &lt;/table&gt;
 &lt;/ul&gt;
 &lt;/nav&gt;


 &lt;/body&gt;
 &lt;/html&gt;
</code></pre>

<p><a href="https://i.stack.imgur.com/m88hx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m88hx.png" alt="enter image description here"></a></p>