Create custom react material ui icon from double svg d path

Question

I want to create a custom material ui icon from a svg file with two paths. My code using

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { green } from '@material-ui/core/colors';
import SvgIcon from '@material-ui/core/SvgIcon';

const useStyles = makeStyles((theme) => ({
  root: {
    '& > svg': {
      margin: theme.spacing(2),
    },
  },
}));

function GradIcon(props) {
  return (
    <SvgIcon {...props}>
       <path
        d="M142.45,174.613c-4.645,0-11.495-0.514-17.779-2.926l-50.271-19.366H49.774v30.162c0,9.274,6.9,19.802,15.405,23.499
            l60.872,26.496c8.505,3.691,22.312,3.707,30.826,0.036l61.536-26.574c8.508-3.671,15.41-14.183,15.41-23.457v-30.162h-27.175
            l-44.547,18.78C156.742,173.365,149.756,174.613,142.45,174.613z"
      />
      <path
        d="M6.475,112.944l121.222,46.709c8.661,3.329,22.603,3.112,31.152-0.492l115.768-48.801v71.999l-7.151,23.866h20.682
            l-7.399-24.114V107.45h-0.208c4.997-3.449,3.832-7.747-3.567-10.393L159.196,55.146c-8.74-3.117-22.859-2.985-31.545,0.277
            L6.529,100.99C-2.157,104.258-2.178,109.612,6.475,112.944z"
      />
    </SvgIcon>
  );
}

export default function SvgIconsColor() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <GradIcon />
    </div>
  );
}

like in the docs didn't work out. As I am fairly new to javascript and react I thought I'd ask on here. Thanks

Answer 1

I solved it by creating a separate component with the following Layout like in this tutorial:

First I converted the image online to an svg.

Then I opened it within an editor and selected the whole svg part.

This part is posted within the component like below. Be sure to disable any unnecessary properties, and set the width and height to 24. The properties below should be enough. Don't delete parts. Just comment out and try till it fits your desired output.

import React from "react";

const IconName = () => {
  return (
    <svg  xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      version="1.1"
      viewBox="<viewBox>"
      <path d="<path>"
       strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="2"
          fill="<color>"
          fill-rule="evenodd"
        />
    </svg>
  );
};

export default IconName;

Then just import the icon to the component you need it in. The number of paths doesn't matter, just remember to include all the properties after the path.