How can I create an SVG Icon from an SVG image with material ui?

Question

So, I'm trying to create a custom Svgicon, but all the source code uses the paths directly . Is there anyway I can add an SVG icon from an image like this?

import { SvgIcon } from '@material-ui/core';
import React from 'react';

const iconStyles = {
  marginRight: 24,
};

export const LawyersIcon = props => (
  <SvgIcon {...props}>
    <img src="https://pictures-for-website.nyc3.digitaloceanspaces.com/icons/team.svg" />
  </SvgIcon>
);

Answer 1

So, you actually don't need to use SvgIcon at all, you can just create your own icon. This is my final code:

import { withStyles } from '@material-ui/core';
import React from 'react';

@withStyles(theme => ({
  svg_icon: {
    width: '1em',
    height: '1em',
    display: 'inline-block',
    fontSize: '24px',
    transition: 'fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
    flexShrink: 0,
    userSelect: 'none',
  }
}))
export class LawyersIcon extends React.Component {
  render() {
    const { classes } = this.props
    return <div className={classes.svg_icon}>
      <img src="https://pictures-for-website.nyc3.digitaloceanspaces.com/icons/team.svg" />
    </div>
  }

}