How do I use a custom SVG file with material-ui Icon Component?

Question

In my project, I am using custom svg files as part of the requirement. I am using [email protected] to achieve this. I looked at the example that is available on the official documentation -> https://material-ui.com/style/icons/#svg-icons

However, in my version, the custom icons do not appear the same way. My forked version is available at https://codesandbox.io/s/mqnq9qrqn8

What I am looking for is a way to use the custom icons that can work well with Material-UI's <Icon> Component.

Could someone please help me with this? Thank you

Solution 1

You can also use the Material-UI IconButton component and wrap it around your svg img as shown below

import React from 'react'
import { Icon } from "@material-ui/core";
import YourLogo from './yourlogo.svg'

export const Logo = () => (
    <Icon>
        <img src={YourLogo} height={25} width={25}/>
    </Icon>
)

Solution 2

You can import the svg file as a React Component and then use it directly inside an SvgIcon Component from Material UI. This will also allow you to style your component.

import React from 'react';
import { SvgIcon, makeStyles } from '@material-ui/core';
import { ReactComponent as MySvg } from './img/someSvgFile.svg';

const useStyles = makeStyles(theme => {
  mySvgStyle:{
    fillColor: theme.palette.primary.main
  }
})

function MySvgIcon() {

  classes = useStyles();

  return(
    <SvgIcon className={classes.mySvgStyle}>
      <MySvg/>
    </SvgIcon>
  )
}

Solution 3

The answer lies in the viewBox attribute ( MDN )

When you are messing with SVGs, especially copy/pasted ones, you have to finesse the viewBox to frame your paths correctly. I usually start with <svg viewBox="0 0 100 100" /> and scale up or down, to taste. After some fiddling, "0 0 60 50" looks pretty good (link).

Looking at the MaterialUI docs (link), they planned for this sort of thing and allow it as a prop on the component.