0

I am using SvgIcon in a react app from material-ui https://material-ui.com/api/svg-icon/. All examples in the document are <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />. I don't know what it is. How can I use this component to render a svg from external file?

I have checked this post How to use an SVG file in a SvgIcon in Material-UI but it doesn't give an answer to load external files.

Joey Yi Zhao
  • 30,508
  • 51
  • 183
  • 377
  • Possible duplicate of [How to use an SVG file in a SvgIcon in Material-UI](https://stackoverflow.com/questions/38510443/how-to-use-an-svg-file-in-a-svgicon-in-material-ui) – Pedro Vieira Apr 23 '19 at 13:44
  • I have checked it but it doesn't give an answer to load external files. – Joey Yi Zhao Apr 23 '19 at 22:17

2 Answers2

2

There is no way to use Path to load external svg. You should use <img /> inside de <Icon> according to this answer in github:

In the '@Christos-Lytras' answer there is an example on how to do it

Bruno Matuk
  • 377
  • 2
  • 6
0

You may import svg icon as a react component and use this component wrapped inside the SvgIcon component:

import { ReactComponent as Car } from './icons/car.svg'
...
<SvgIcon>
  <Car />
</SvgIcon>
Andriy
  • 131
  • 5