How to stretch out an icon in material UI?

user_13788175 0
Viewed 820

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:

Original

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:

Width set to 100%

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:

Height increased

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!

material-ui reactjs css html
2 Answers
user_124324240

Since MUI icons are SVGs, you can use the viewBox and preserveAspectRatio to stretch them.

<Menu 
   viewBox={'5 2 10 20'} 
   preserveAspectRatio= 'none'
   style={{
     width: '100%',
     height: '25px'
   }}
/>

renders to this... enter image description here

For a more detailed explanation, take a look here and here

user_125022370
Related