problema na formatação de icone do google icons

[Alessandro almeida]

estou tendo problema na formatação de css no icone do google icons, já tentei de tudo para deixar ele alinhado com o texto, mas não consigo. alguém pode me dizer oque eu fiz de errado para poder consertar?

esse é o desenvolvimento do html

<nav id="nav">

          <button aria-label="Abrir Menu" id="btn-mobile" aria-haspopup="true" aria-controls="menu" aria-expanded="false">Menu

            <span id="hamburger"></span>

          </button>

          <ul id="menu" role="menu">

            <li><a href="/">Sobre</a></li>

            <li><a href="/">Produtos</a></li>

            <li><a href="/">Portfólio</a></li>

            <li><a class="acessar" href="/">Acessar<span class="material-icons">login</span></a></li>

            <li><a href="/"><input type="submit" value="Começar agora"></a></li>

          </ul>

 </nav>

e esse a do css dessa parte

.acessar {

  color: #0059F1;

  font-weight: 500;

  margin-top: -10px;

}

#header {

    box-sizing: border-box;

    height: 70px;

    padding: 1rem;

    display: flex;

    align-items: center;

    justify-content: space-around;

  }

 

#menu {

    display: flex;

    align-items: center;

    list-style: none;

    gap: 0.5rem;

  }

 

#menu a {

    display: block;

    padding: 0.5rem;

  }

 

#menu input {

    margin: auto;

    cursor: pointer;

    color: white;

    font-size: 16px;

    background-color: #0059F1;

    width: 130px;

    height: 30px;

    border: none;

    border-radius: 12px;

  }

[Alessandro almeida]

consegui resolver 

o probrema estava no html, tirei o icone de dentro da ancora <a></a> e ficou assim

 <li id="iacessar"><a class="acessar" href="/">Acessar</a>

              <span class="material-icons">login</span></li>

removi o -10px de margin q estava na class="acessar" e criei um id para poder alinhar os dois desse jeito:

#iacessar {

  display: flex;

  align-items: center;

  color: #0059F1;

e o resultado final ficou assim