Capítulo 26 Aula 06 – Finalizando projeto tela de login

Bom dia!
neste tópico.. não consigo identificar porque meu ícone não esta mudando, sigo os mesmos passos mas por algum motivo o css não esta reconhecendo a classe e logo não esta ajustando conforme as orientações da aula… poderiam me ajudar?

div.campo > i {
    color: #445069;
    background-color: black;
    font-size: 2em;
    width: 40px;
    padding: 5px;
}

div.campo > input {
    background-color: #f9f2be;
    font-size: 1em;
    width: calc(100% - 44px);
    height: 80%;
    transform: translateY(-10px);
    border: 0px;
    border-radius: 8px;
    margin: 4px;
}

no campo div.campo > i (não muda nada no icone), ja no código abaixo muda mas a configuração não casa... abaixo o código html que corresponde a essa estilização..

<div class=”campo”>
<span class=”material-icons”>mail_outline</span>
<input type=”email” name=”login” id=”ilogin” placeholder=”Seu email” autocomplete=”email” required maxlength=”30″>
<label for=”ilogin”>Login</label>
</div>
<div class=”campo”>
<span class=”material-icons”>vpn_key</span>
<input type=”password” name=”senha” id=”isenha” placeholder=”Sua senha” autocomplete=”current-password” required minlength=”8″ maxlength=”20″>
<label for=”isenha”>Senha</label>
</div>

muito obrigada