Align menu icons inside a <li>

Question

I’m not getting to align icons to the right of my menus.
For some reason they appear below where they should be.
Below is the code to understand the problem. And here jsfiddle.
I’m a beginner in the area, sorry if the question seems too obvious this is something I’m not able to solve on my own.
Thanks for your help.

/*====Menu Esquerda====*/

nav#menu_esquerda {
  background-color: #E1F0DB;
  border: 0.5px solid #999999;
  border-radius: 5px;
  font-family: helvetica;
  width: 180px;
  float: left;
  margin-top: 10px;
  height: 1098.8px;
}

nav#menu_esquerda ul {
  padding-left: 2px;
}

nav#menu_esquerda li {
  color: #999999;
  list-style: none;
}

nav#menu_esquerda li:hover {
  background-color: #606060;
}

nav#menu_esquerda a {
  cursor: default;
  color: black;
  text-decoration: none;
  line-height: 1.5;
  display: block;
  padding: 3px;
}

nav#menu_esquerda a:hover {
  color: white;
}

.active {
  background-color: #606060;
}

.active a {
  color: white !important;
}

.preencher {
  background-color: #B9DCBB;
  border: 0.5px solid #999999;
  border-top-right-radius: 5px;
  padding: 3px;
}

.icone_menu {
  float: right;
  max-width: 20px;
  opacity: 0.5;
}

.negrito {
  font-weight: bold;
}

<nav id="menu_esquerda">
  <div class="preencher"><span class="negrito">Menu</span><img src="{% static 'images/menu_icon.png' %}" class="icone_menu"></div>
  <ul>
    <li id="geral"><a href="{% url 'geral' %}" title="Informações Gerais">Geral</a><img src="{% static 'images/geral_icon.png' %}" class="icone_menu"></li>
    <li id="notas"><a href="{% url 'notas' %}" title="Informações sobre notas">Notas</a><img src="{% static 'images/notas_icon.png' %}" class="icone_menu"></li>
    <li id="Frequências"><a href="{% url 'frequencias' %}" title="Informações sobre frequência">Frequência</a><img src="{% static 'images/frequencia_icon.png' %}" class="icone_menu"></li>
  </ul>
</nav>

Answer 1

Put the img tag on the link only. Follow the code below:

/*====Menu Esquerda====*/
nav#menu_esquerda {
    background-color: #E1F0DB;
    border: 0.5px solid #999999;
    border-radius: 5px;
    font-family: helvetica;
    width:180px;
    float: left;
    margin-top: 10px;
    height: 1098.8px;
}
nav#menu_esquerda ul{
    padding-left: 2px;
}
nav#menu_esquerda li{
    color: #999999;
    list-style: none;
}
nav#menu_esquerda li:hover{
    background-color: #606060;
}
nav#menu_esquerda a{
    cursor: default;
    color: black;
    text-decoration: none;
    line-height: 1.5;
    display: block;
  padding: 3px;
}
nav#menu_esquerda a:hover{
    color: white;
}
.active{
    background-color: #606060;
}
.active a{
    color: white !important;
}
.preencher{
    background-color: #B9DCBB;
    border: 0.5px solid #999999;
    border-top-right-radius: 5px;
    padding: 3px;
}
.icone_menu{
    float: right;
    max-width:20px;
  opacity: 0.5;
}
.negrito{
    font-weight:bold;
}

    <nav id="menu_esquerda">
        <div class="preencher"><span class="negrito">Menu</span><img src="{% static 'images/menu_icon.png' %}" class="icone_menu"></div>
        <ul>
            <li id="geral"><a href="{% url 'geral' %}" title="Informações Gerais">Geral<img src="{% static 'images/frequencia_icon.png' %}" class="icone_menu"></a></li>
            <li id="notas"><a href="{% url 'notas' %}" title="Informações sobre notas">Notas<img src="{% static 'images/frequencia_icon.png' %}" class="icone_menu"></a></li>
            <li id="Frequências"><a href="{% url 'frequencias' %}" title="Informações sobre frequência">Frequência<img src="{% static 'images/frequencia_icon.png' %}" class="icone_menu"></a></li>
        </ul>
    </nav>

Answer 2

I believe it’s something you want.

        html,body{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        nav{
            max-width: 250px;
            background-color: yellow;
            padding: 10px;
        }

        .space-between{
            justify-content: space-between;
        }

        .container{
            display: flex;
        }
 

    

<nav>
    <div class="container space-between">
        <p>Menu</p>
        <p>Icon menu</p>
    </div>
    <hr>
    <div class="Menu">
        <div class="container space-between"><a href="">Link aqui</a> <i>icon aqui</i></div>
        <div class="container space-between"><a href="">Link aqui</a> <i>icon aqui</i></div>
        <div class="container space-between"><a href="">Link aqui</a> <i>icon aqui</i></div>
        <div class="container space-between"><a href="">Link aqui</a> <i>icon aqui</i></div>
    </div>
</nav>