How to use an SVG file in a SvgIcon in Material-UI

Question

I\'ve got an SVG file and I want to make an SvgIcon component out of it, how should I do that?

In the documentation, all the examples use either predefined Material Icon

Answer 1

You can import SVGs directly as React components and use them in :

import React from "react";
import { ReactComponent as Logo } from "./logo.svg";
import SvgIcon from "@material-ui/core/SvgIcon";

const App = () => (
  
    
  
);

export default App;

See also: https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs

Unfortunately React seems not able to render all kind of SVGs (e.g. modified with Inkscape, Illustrator) yet. But at least the default logo.svg inside a create-react-app project works.