Icons do not display correctly with the default font size in Safari (ios)

[Zombobot1]

I have to adjust font size to get correct render in safari

<div style={{ display: 'flex', flexDirection: 'column' }}>
  <div style={{ display: 'flex' }}>
    <span className="material-symbols-rounded" style={{ fontSize: 23 }}>
      lunch_dining
    </span>
    <span className="material-symbols-rounded" style={{ fontSize: 24 }}>
      lunch_dining
    </span>
    <span className="material-symbols-rounded" style={{ fontSize: 25 }}>
      lunch_dining
    </span>
  </div>
  <div style={{ display: 'flex' }}>
    <span className="material-symbols-rounded">home</span>
    <span className="material-symbols-rounded">favorite</span>
    <span className="material-symbols-rounded">grade</span>
  </div>
</div>

Expected result (chrome desktop & android):

Result in safari (ios 16.2):