Need help with consistent rending of Material Symbols font in screenshots

[stephanietuerk]

My team is having issues with the Material Symbols font ligature not being replaced with an icon by the time a screenshot is taken.

(This should read "learn more" and then have an icon to the right of it.)

We are loading this font via in the index.html:

 <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&icon_names=arrow_back,arrow_downward,arrow_forward,arrow_upward,block,cancel,check_box,check_box_outline_blank,collapse_content,download,expand_content,expand_more,image,info_i,menu,search&display=block"
    />

The icons are provided using this pattern in html:

<span class="material-symbols-outlined">expand_content</span>

This is an Angular (v18) application.

I don't think this is a font loading issue because we get it on every screenshot, even after the Cypress has significantly traversed the site.

Anyone have any ideas about how to solve this? I see that there have been issues opened around font loading in the past but they have been resolved by PRs and it's been two years since the last one I could find. Feels like I'm likely doing something wrong.