Trying to add linear gradient to a martialUI icon

问题

I'm trying to add a linear gradient to a material UI icon using the background-clip property but it just doesn't show up?

.social-icon{
    background: linear-gradient(to right bottom, #FD297B, #FF5864, #FF655B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

'''

<div className="social-icons">
  <FacebookIcon className="social-icon" fontSize="large" />
  <TwitterIcon className="social-icon" fontSize="large" />
  <InstagramIcon className="social-icon" fontSize="large" />
  <YouTubeIcon className="social-icon" fontSize="large" />
</div>

来源：https://stackoverflow.com/questions/65051364/trying-to-add-linear-gradient-to-a-martialui-icon