How can I add a span tag inside my menu link? My twig file contains the following:

&lt;li{{ item.attributes.addClass(classes) }}&gt;
   {{ link(item.title, item.url) }}
&lt;/li&gt;


Which outputs:

&lt;li class="menu-item item--search"&gt;
    &lt;a href="#search" title="Expand Search" data-drupal-link-system-path="&amp;lt;front&amp;gt;"&gt;Search&lt;/a&gt;
&lt;/li&gt;


But I really want to add a &lt;span&gt; tag around the text Search (for styling purposes and replacing the text with an icon image.

I tried replacing {{ link(item.title, item.url) }} with &lt;a href="{{item.url}}"&gt;&lt;span&gt;{{item.title}}&lt;/span&gt;&lt;/a&gt; but that loses valuable attributes provided by the link function (as well as the menu_link_attributes module). I'm not sure if I can do this in twig or I need to write some sort of function in my .theme file. Any help appreciated. Thank you.
You can try this code:

{% set tmp = '&lt;span&gt;'~item.title~'&lt;/span&gt;' %}
{% set link_text %}{{ tmp|raw }}{% endset %}
{{ link(link_text, item.url) }}