Olá,
Você não precisa adicionar CSS personalizado ao SVG se quiser que ele apareça antes do título, pois o colocamos nas tags <h2>, então ele usará os estilos <h2>. Mas você tem que modificar a seção do título de pesquisa. Se eu estiver correto, esta captura de tela que você compartilhou acima é do seu tema DarkPixlz’s Modern Theme?
Verifiquei esse tema e acho que o problema é que você usa preenchimentos (paddings) e tamanho de fonte enormes para alinhar o título ao centro e não há espaço suficiente para o ícone de pesquisa.
.search-container .search-page-heading {
padding: 2em 3.8em;
font-size: 5em;
}
Minha sugestão:
Eu uso margens em vez de preenchimentos, mas não são necessárias nas laterais - porque .search-header já tem 10% de preenchimento nas laterais - para ter espaço suficiente para o ícone e usar um tamanho de fonte menor, especialmente no celular. Para corrigir o alinhamento vertical, você pode adicionar 1em de margem superior, pois seu .main-outlet tem um preenchimento de 3em na parte superior.
Provavelmente é melhor ver se eu mudo o fundo.
.search-container .search-page-heading {
margin: 1em 0 2em 0;
font-size: 5em; // use um tamanho de fonte menor em telas menores
text-align: center;
}