Lo que hace el método .text() es que sobrescribe no solo el texto sino también HTML. Lo más fácil es mover el texto dentro de <i> para que no se sobrescriba solo lo que hay dentro. Revise el ejemplo a continuación y observe que el ícono permanece; es porque en realidad es un pseudoelemento CSS y siempre es ignorado por los métodos y funciones que se ocupan del DOM.

 $('.test').on('click', function() { $(this).find('i').text(' IT WORKS!') });

 <link href='https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'> <button class='test' type='button'> <i class="fa fa-star-o"> TEST</i> </button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

No he usado jQuery desde hace mucho tiempo, así que aquí hay un ejemplo en javascript vainilla.

 const btn = document.querySelector('#test'); btn.addEventListener('click', (e) => { e.preventDefault(); // selecting span tag -> you can also give it a specific id or class if you want btn.children[1].innerText = 'other'; })

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/> <button type="button" id="test"> <i class="fa-2x fa-regular fa-floppy-disk"></i> <span>test</span> </button>

como dijo @Kunal Tanwar, envolver el texto en un lapso lo resuelve y usar Jquery este es mi enfoque ... asumiendo que el botón tiene una identificación de test

usando el método .find() para encontrar el hijo span

 <button type="button" id="test"> <i class="fa-2x fa-regular fa-floppy-disk"></i> <span>test<span> </button> $('#test').on('click', function(e){ e.preventDefault(); $(this).find('span').text("other"); });

y otra opción sería usar el selector descendiente ya que el lapso es un hijo directo del botón

 $('#test').on('click', function(e){ $('#test > span').text('other'); });