1

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
  • 37,514
  • 71
  • 268
  • 523
  • 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

3

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
  • 562
  • 5
  • 11
1

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
  • 141
  • 5