Hola,
No necesitas agregar CSS personalizado a SVG si quieres que aparezca antes del título porque lo pusimos en las etiquetas <h2>, por lo que usará los estilos de <h2>. Pero tienes que modificar la sección del título de búsqueda. Si no me equivoco, ¿esta captura de pantalla que compartiste arriba es de tu tema DarkPixlz’s Modern Theme?
Revisé ese tema y creo que el problema es que usas enormes rellenos y tamaños de fuente para alinear el título al centro y no hay suficiente espacio para el ícono de búsqueda.
.search-container .search-page-heading {
padding: 2em 3.8em;
font-size: 5em;
}
Mi sugerencia:
Uso márgenes en lugar de rellenos, pero no son necesarios en los lados - porque .search-header ya tiene un 10% de relleno en los lados - para tener suficiente espacio para el ícono y usar un tamaño de fuente más pequeño, especialmente en dispositivos móviles. Para arreglar la alineación vertical, puedes agregar un margen de 1em en la parte superior, ya que tu .main-outlet tiene un relleno de 3em en la parte superior.
Probablemente sea mejor ver si cambio el fondo.
.search-container .search-page-heading {
margin: 1em 0 2em 0;
font-size: 5em; // usa un tamaño de fuente más pequeño en pantallas más pequeñas
text-align: center;
}