Allow color prop to inherit from parent.

[dillonbhola]

Can you please change the color property to inherit the color of the parent component by default instead of null.

When using Material-UI for React, specifying the color adds unneeded complexity to theming.

For example:

import { IconButton } from "@material-ui/core";
import Icon from "@mdi/react";
import { mdiClose } from "@mdi/js";

<IconButton color="default">
   <Icon path={mdiClose} size={1} />
</IconButton>

The code snippet will render a close icon with the default color black instead of inheriting the gray color of the IconButton parent component.

An added bonus would be to allow the size prop to inherit from the parent as well.

[Templarian]

@dillonbhola v1.3.0 will inherit currentColor. We've updated the demo page to reflect this.

https://templarian.github.io/@mdi/react/

Sorry this took so long to get in. Please let me know if everything works as expected.

[dillonbhola]

hi @Templarian

I appreciate you giving this issue some attention.

Setting the parent container (<IconButton> in my example) with a style property of fill = blue allows the <Icon> component to inherit the fill property of blue. Works as you described.

The issue I raised was inheriting the color property of the parent container, not the fill property. Is there any way the Icon component can inherit the color prop of its parent and apply it to its fill prop?

[Templarian]

I don't think React components are suppose to know anything about their parent component. I believe that is an anti-pattern. Unless something has changed (really haven't used react very much, mostly using web components now-a-days).

[dillonbhola]

you are correct. I will work with what I have. Much thanks