title: How do I add a logo to MUI React navbar
body: <p>I'd like to add a logo to the left side of my navbar but can't seem to make it work properly.</p>
  <pre><code>const Navbar = ({ ...props }) =&gt; {
      return (
          &lt;React.Fragment&gt;
              &lt;CssBaseline /&gt;
              &lt;ElevationScroll {...props}&gt;
                  &lt;AppBar&gt;
                      &lt;Grid container sx={{p:2, flexDirection:'row', justifyContent:'space-between', flexWrap:'nowrap', backgroundColor:'#1c1c1c'}}&gt;
                          &lt;Grid&gt;
                              &lt;img src={'./images/Logo.png'} alt={'shadow-reels-logo'} height={'10px'}&gt;&lt;/img&gt;   
                          &lt;/Grid&gt;
                          &lt;Grid item sx={{}}&gt;
                              &lt;Grid container sx={{}}&gt;
                                  &lt;Grid item&gt;
                                      &lt;Button sx={{color:'#ededed', borderRadius:'40px'}}&gt;Services&lt;/Button&gt;
                                  &lt;/Grid&gt;
                                  &lt;Grid item sx={{mx:5}}&gt;
                                      &lt;Button sx={{color:'#ededed', borderRadius:'40px'}}&gt;Work&lt;/Button&gt;
                                  &lt;/Grid&gt;
                                  &lt;Grid item&gt;
                                      &lt;Button sx={{color:'#ededed', borderRadius:'40px'}}&gt;About&lt;/Button&gt;
                                  &lt;/Grid&gt;
                              &lt;/Grid&gt;
                          &lt;/Grid&gt;
                          &lt;Button sx={{color:'black', backgroundColor:'#ededed', borderRadius:'40px'}}&gt;Contact&lt;/Button&gt;
                      &lt;/Grid&gt;
                  &lt;/AppBar&gt;
              &lt;/ElevationScroll&gt;
              &lt;Toolbar /&gt;
          &lt;/React.Fragment&gt;
      );
  
  }
  </code></pre>
  <p>I have the logo in an images folder within the react apps src folder.</p>