Control styles of the underlying svg icons from the component itself

[saranshbansal]

How do I change styles of the underlying SVG elements? I need to make the icons look bigger and of different colors. There should be an option to do so from the main component itself.

import ToggleStarBorder from 'material-ui/svg-icons/toggle/star-border';
import ToggleStar from 'material-ui/svg-icons/toggle/star';
import Rating from 'react-rating';

          <Rating
            {...restProps}
            initialRating={rating}
            value={value === '' ? initialRating : value}
            onChange={this.handleChange}
            emptySymbol={<ToggleStarBorder />}
            fullSymbol={<ToggleStar />}
          />

[dreyescat]

Hi @saranshbansal!

How do I change styles of the underlying SVG elements?

Using the styles of the underlying elements. For example, using the style or the className attributes:

emptySymbol={<ToggleStarBorder className={YourClassName} />}

emptySymbol=<ToggleStarBorder style={{width: '64px', height: '64px', color: 'red'}} />

Check the material-ui documentation if there is a recommended way to do it. It's been a long time since I used this library.

There should be an option to do so from the main component itself.

I don't think so... The main component is a container of symbols, regardless of what kind of symbol it contains (icon, svg-icon, material-ui element, react element, etc.).

[saranshbansal]

Ah yes, you're right. I'll close it.