Is there a way to make svg icon adapt to apple system fonts?

Question

Consider the following simple React / MaterialUI component

<div>
  <MenuIcon />
  <span style={{ font: '-apple-system-body' }}>Hello World</span>
</div>

Result of this on my iPhone is attached. As I change the Settings > Accessibility > Larger Text option on my iPhone, the Hello World text resizes itself. The icon, however, doesnt. Is there a way to make the icon resize too?

Answer 1

<div>
  <span style={{ font: '-apple-system-body' }}>
    <MenuIcon style={{ fontSize: 'inherit', transform: 'scale(1.5)' }}/>
  </span>
  <span style={{ font: '-apple-system-body' }}>Hello World</span>
</div>

I noticed that <MenuIcon> sets font-size:1.5rem by default. Hence, <MenuIcon style={{ fontSize: 'inherit' }}/> undid this, and adding transform: scale(1.5) made up for the smaller svg size. Further, I had to set the container of the icon to the -apple-system-body for the container to respond to changed text-size in the accessibility settings.