Trying to add linear gradient to a material UI icon using background clip?

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>