How to enlarge Material-ui Rating icons

Issue

I am using npm to show develop a widget. I want to use material-ui Ratin component and I have integrate it. But when I place the widget in a webpage, it has a html font-size: 62.5%, so the component is too small because in the icon style, there are a 1em unit in height and in width. screenshot.

This is my code:

import React from 'react';
import Rating from '@material-ui/lab/Rating';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import { withStyles } from '@material-ui/core/styles';
import StarOutlineIcon from '@material-ui/icons/StarOutline';

const styles = theme => ({
  iconFilled:{
    color:theme.palette.primary.main,
  },
  iconEmpty:{
    color:theme.palette.primary.main
  }
})

class SimpleRating extends React.Component{

  state = {
    disabled: false,
    rating: 0,
    opinion: "",
  };

  changeRating(event, newRating) {
    this.setState({
      rating: newRating,
      disabled: true
    });

    this.props.send_rating(newRating)
  }

  defaultLabelText(value) {
    let text="sin calificación"
    if (value===1){
      text = "una estrella"
    }
    else if (value>1 && value<=5) {
      text = ""+ value + " estrellas"
    }
    return(text)
  }

  render() {
  const { classes } = this.props;
  return (
    <div>
      <Box component="fieldset" mb={3} borderColor="transparent">
        <Typography component="legend"></Typography>
        <Rating
          classes={{
            iconFilled: classes.iconFilled,
            iconEmpty: classes.iconEmpty
          }}
          emptyIcon = {<StarOutlineIcon></StarOutlineIcon>}
          name={"rating_"+this.props.number}
          disabled={this.state.disabled}
          getLabelText={this.defaultLabelText.bind(this)}
          onChange={this.changeRating.bind(this)}
          value={this.state.rating}
        />
      </Box>
    </div>
  );
    }
}

export default withStyles(styles)(SimpleRating);

Althougth I have been able to change the color with the styles, I cannot modify that down. How can I change that properties of the icon?

EDIT: If i use the class icon in css i change the parent of the star icons while they continue with 1em x 1em size. screenshot with changes in icon

Solution

Finally I solve it with this code because I was no able to enter to the icon itself:

icon = {<StarIcon style={{width:"32px",height:"32px"}}></StarIcon>}
emptyIcon = {<StarOutlineIcon style={{width:"32px",height:"32px"}}></StarOutlineIcon>}

Answered By - Adrián