O meu placeholder ficou em cima do ícone. Como resolver?

Olá pessoal. O meu placeholder ficou em cima do ícone. Como resolver? Obrigado pela ajuda.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Segue o código: HTML:

<app-card variant="secondary" class="form-busca" >
    <form>
        <div class="flex-container">
            <mat-button-toggle-group aria-label="Tipo de passagem">
                <mat-button-toggle>
                    <mat-icon>check</mat-icon>
                    Ida e Volta</mat-button-toggle>
                <mat-button-toggle value="SomenteIda">Somente Ida</mat-button-toggle>
            </mat-button-toggle-group>
            <mat-chip-listbox aria-label="Seleção de passagens" multiple>
                <mat-chip-option selected>1 Adulto</mat-chip-option>
                <mat-chip-option>Econômica</mat-chip-option>
            </mat-chip-listbox>
        </div>
        <div>
            <mat-form-field class="input-container" appearance="outline">
                <mat-label>Origem</mat-label>
                <mat-icon matPrefix>
                    flight_takeoff
                </mat-icon>
                <input matInput placeholder="Origem">
                <mat-icon matSuffix>search</mat-icon>
            </mat-form-field>
            <button mat-icon-button>
                <mat-icon matPrefix>
                    sync_alt
                </mat-icon> 
            </button>
            <mat-form-field class="input-container" appearance="outline">
                <mat-label>Destino</mat-label>
                <mat-icon matPrefix>
                    flight_takeoff
                </mat-icon>
                <input matInput placeholder="Destino">
                <mat-icon matSuffix>search</mat-icon>
            </mat-form-field>
        </div>
    </form>
</app-card>

Css (em SCSS):

.form-busca {
    margin: 40px 0;
    display: block;
    .flex-container {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 16px 0;
    }
    .input-container {
      margin-bottom: -1.25em;
    }
    .mat-button-toggle-checked {
      background-color: #F7F2FA;
   }
  }

.input-container { margin-bottom: -1.25em; // você remove o espaço extra causado pelo ícone position: relative; // aqui você torna o posicionamento dos ícones relativo ao campo de entrada // Estilo para o ícone do prefixo (à esquerda) .mat-form-field-prefix { position: absolute; // Assim você posiciona o ícone absolutamente em relação ao campo de entrada top: 50%; // alinha o ícone verticalmente ao meio transform: translateY(-50%); // ajustando o ícone para o centro vertical left: 8px; // adicionando um espaçamento à esquerda para o ícone } // Estilo para o ícone do sufixo (à direita) .mat-form-field-suffix { position: absolute; // Posiciona o ícone absolutamente em relação ao campo de entrada top: 50%; // Alinha o ícone verticalmente ao meio transform: translateY(-50%); // Ajusta o ícone para o centro vertical right: 8px; // Adiciona um espaçamento à direita para o ícone } }

Mergulhe em programação