How to add custom `PNG` image to material ui icon

Question

I am using material-ui@next for my react app. I want to use Icon component with dynamic images in png format. I googled this but cannot find anything directly helpful.

Answer 1

You can saveas PNG images to BMP format then convet them to SVG with potrace app.

potrace icon1.bmp -s -o icon1.svg

Now you can use SvgIcon component. open svg file with notepad and copy tags that are in svg tag and put it into SvgIcon:

function Icon1(props) {
return (
<SvgIcon {...props} >
// tags in your svg file
// ex: <path d="M81 1032 c-19 -9 "/>
</SvgIcon>
);
}

Your icon component is ready:

<Icon1 /> 

Answer 2

You can:

• use: https://convertio.co/png-svg/ to convert your image to svg format
• download the file
• open the .svg file in a text editor

In your code:

import * as React from "react";
import { SvgIcon } from "@material-ui/core";

export default function Icon1(props) {
  return (
    <SvgIcon
      {...props}
      ... // add here the params that are sent to <svg /> tag in your file 
   /*
    mine were something like:
      version="1.0"
      xmlns="http://www.w3.org/2000/svg"
      width="3000.000000pt"
      height="1068.000000pt"
      viewBox="0 0 3000.000000 1068.000000"
      preserveAspectRatio="xMidYMid meet">
    */
    >
    // The tags inside the <svg />; probably something like <g/> <path/> tags
    </SvgIcon>
  );
}