Material-ui: [FloatingActionButton] Color prop of icon not used in FloatingActionButton

Created on 30 Mar 2016 · 5Comments · Source: mui-org/material-ui

The color prop for a SVG icon inside a FloatingActionButton is not used. In below example, the icon color is the default white color, not red as expected. This was working in version 0.14.4

import PlaceIcon from 'material-ui/lib/svg-icons/maps/place';

<FloatingActionButton>
  <PlaceIcon color="#ff0000" />
</FloatingActionButton>

Versions

Material-UI: 0.15.0-alpha.2
React: 0.14.7
Browser: at least Chrome & Firefox

question

Source

jkettmann

👍1

Most helpful comment

@jkettmann - the color is controlled by <FloatingActionButton /> so it can set it for disabled etc.

You could create a custom theme, or update the theme on context with the muiThemefloatingActionButton.iconColor and floatingActionButton.disabledTextColor keys.

Or override the icon style with:

    <FloatingActionButton iconStyle={{fill: '#FF0000'}}>
      <PlaceIcon />
    </FloatingActionButton>

mbrookes on 30 Mar 2016

👍4 😄1

All 5 comments

@jkettmann - the color is controlled by <FloatingActionButton /> so it can set it for disabled etc.

You could create a custom theme, or update the theme on context with the muiThemefloatingActionButton.iconColor and floatingActionButton.disabledTextColor keys.

Or override the icon style with:

    <FloatingActionButton iconStyle={{fill: '#FF0000'}}>
      <PlaceIcon />
    </FloatingActionButton>

mbrookes on 30 Mar 2016

👍4 😄1

@jkettmann : Did you try the above solution? Were you able to get it resolved?

tintin1343 on 13 Apr 2016

I am closing this issue for now. If you still feel that the above solution/suggestion does not help you can reopen it again or seek help on the gitter channel of material-ui or post the question in stackoverflow with 'material-ui' tag.

tintin1343 on 13 Apr 2016

@tintin1343 Yes this solved my problem

jkettmann on 14 Apr 2016

In my opinion the documents should be updated to reflect that FloatingActionButton is gonna eat the valid props documented in child components, or we should reopen this so that it can be tracked and some beautiful engineers can make this work.