How to stretch out an icon in material UI?

Question

I'm working on a React + material UI project, and I cannot for the life of me figure out how to elongate, or stretch, just the width of an icon from Material UI.

Here I have an icon thats wrapped inside of a tag: originally I had margin left set to auto so that it would get pushed to the right:

What I want is for the hamburger 3-lines icon to stretch all the way across the top bar, without increasing its height. If I go on the icon and set width to 100, it jumps to the center since now the icon is occupying the entire element (basically gets rid of the left margin). However, the icon does not actually stretch to fill the space:

Ive also noticed that the only way I've gotten the size to change is if I also scale up the height of the icon. Here is when width is 100% and height to 32rem:

Now, technically the three lines are going across the bar, but the icon is also way "Bigger" in height now. How can I get this icon to stretch across the available space without scaling its height up? Any tips are appreciated, thanks!

Answer 1

Since the icon is an SVG object you can try to add preserveAspectRatio="none". See here: SVG: stretching an image