如何将渐变颜色与渐变背景一起添加到 google 图标？

How to add gradient color to google icons along with a gradient background?

我为图标设置了圆形渐变背景。还想将图标颜色设置为渐变而不是“#fff”。我怎样才能做到这一点？

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<i class="material-icons cloud-icon">cloud</i>

</body>
</html>


.cloud-icon{
    background: linear-gradient(#fff, blue);
    border-radius: 50%;
    padding: 60px;
    height: 35px;
    width: 35px;
    font-size:40px;
    color:#fff;
}


span{
  background: linear-gradient(#fff, blue);
  border-radius: 50%;
  padding: 60px;
  height: 35px;
  width: 35px;
  font-size:40px;
  color:#fff;
    float: left;
}
span i{  background: linear-gradient(#32f8ff, #e9e9ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<span><i class="material-icons cloud-icon">cloud</i></span>

</body>
</html>