How to apply to material-ui-icons global MuiSvgIcon styles from the theme

[palaniichukdmytro]

How to apply to material-ui-icons global MuiSvgIcon styles from the theme

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The MuiSvgIcon should override in theme both simple SvgIcon with path, and material ui icons, but overrides only SvgIcon

import SvgIcon from 'material-ui-next/SvgIcon'
import Add from 'material-ui-icons/Add'

<SvgIcon>
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
  </SvgIcon>

not

<Add />

Current Behavior

I've created createMuiTheme, and try to overrides material-ui-icons and apply new styles,

MuiSvgIcon: {
            root: {
                width: 18,
                height: 18,
            },
        },

Context

Your Environment

Tech	Version
Material-UI	v1-beta
React	15.5.4
browser	chrome
material-ui-icons	^1.0.0-beta.10

[oliviertassinari]

The override should be working as expected, please provide a reproduction example if it doesn't.

[eyn]

@palaniichukdmytro - any chance you are running v1 and v0.1 side by side (given you are using material-ui-next) if so material-ui-icons can bind to the wrong version of material-ui. See the discussion here #7195 (comment)

[oliviertassinari]

@eyn I have been facing this issue yesterday installing admin-on-rest. I couldn't use your webpack plugin nor a babel plugin to solve the problem. I'm gonna make a change to material-ui-icons to bypass the issue.

[eyn]

@oliviertassinari - yeah I have a create-react-app project where I just ended up coping the whole of material-ui-icons into the source code for now and changed the import. You solution in material-ui-icons looks like a better option!

[palaniichukdmytro]

@eyn Indeed I use both versions v1 and v0.1. So I agree that is great solution to changed the import, but better to change in directly material-ui-icons

[oliviertassinari]

@palaniichukdmytro Here is the PR #8473

[oliviertassinari]

So now, we can use material-ui and material-ui-next at the same time with the icon repository at the condition of doing the following before all the other imports:

import SvgIcon from 'material-ui-next/SvgIcon'

global.__MUI_SvgIcon__ = SvgIcon

[rdegorter]

Would the above fix the following issue? I have been using v1, and i'm trying to add a component from the community that only supports 0.x.

TypeError: Cannot read property 'svgIcon' of undefined
SvgIcon.render
node_modules/material-ui/SvgIcon/SvgIcon.js:91

[carlgunderson]

@rdegorter I'm having this issue and rather than updating our somewhat complex build process, I simply grabbed the SVG code for each icon I'm using directly from material-ui-icons and dropped that into my components in place of named imports. This doesn't solve the issue, which could still manifest itself in more impactful ways, though.

[roadev]

Upgrading to beta 41 solved the problem!