CODEWITHSUNDEEP
cssmaterial-uicreate-react-app
AMP_035
AMP_035

Reputation: 237

Unable to render svg in Material UI

I'm using Material-UI with create-react-app and am having trouble rendering an .svg file in a drawer header. I get a broken image rendering instead of the .svg I'm expecting. Any help would be greatly appreciated. Thanks!

<DrawerHeader>
  <div>
      <Icon classes={{root: classes.iconRoot}}>
          <img className={classes.imageIcon} src="/assets/logo.svg"/>
      </Icon>

  </div>
</DrawerHeader>

 imageIcon: {
    display: 'flex',
    height: '100%',
    width: 'inherit'
 },
 iconRoot: {
     textAlign: 'center'
 },

Upvotes: 0

Views: 720

Answers (1)

noobprogrammer
noobprogrammer

Reputation: 241

You need to import the image like

import Img from '../../logo.svg'

then pass it to the src

 <img className={classes.imageIcon} src={Img} />

Upvotes: 1

Related Questions