title: How to give gradient color to icon?
body: <p>I am trying to give gradient color to icon. While this works on text tags,its not working on the icon for me. Any advice would be highly appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.way_icon h3{
   font-size: 40px;      
   background:-moz-linear-gradient(top, #e72c83 0%, #a742c6 100%); 
      background: -webkit-linear-gradient(top, #e72c83 0%,#a742c6 100%); 
      background: linear-gradient(to bottom, #e72c83 0%,#a742c6 100%);
      -webkit-background-clip: text;
      -moz-background-clip: text;
      background-clip: text;
     -webkit-text-fill-color:transparent;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="way_icon"&gt;
    &lt;h3&gt;jfkfjfjr&lt;i class="ion-ios-gear"&gt;&lt;/i&gt;&lt;/h3&gt;
    &lt;a href="#"&gt;&lt;i class="ion-ios-gear"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/&gt;</code></pre>
  </div>
  </div>
  </p>