html - FontAwesome 5 - Multi color icon

Question

FontAwesome 5 offers thousands of icons that are built with SVG. This way, it's easy to color the entire icon by using fill. But what if I want to use multiple colors? For example, given the icon Google, I want to color it like so:

Answer 1

By using gradient for the color and two icons we may achieve this but it remains a hacky way and you need to handle each case (icon + coloration) specifically:

.fa-google path{
  fill:url(#grad1);
}
.fa-google + .fa-google path{
  fill:url(#grad2);
}
.icon {
  display:inline-block;
  position:relative;
}
.fa-google + .fa-google {
   position:absolute;
   left:0;
   top:0;
   clip-path: polygon(0% 0%,120% 0%,0% 75%);
}

<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js" ></script>
<svg style="width:0;height:0;">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="30%" x2="50%" y2="0%">
      <stop offset="50%" stop-color="#34a853" />
      <stop offset="50%" stop-color="#4285f4" />
    </linearGradient>
    <linearGradient id="grad2" x1="0%" y1="30%" x2="50%" y2="0%">
      <stop offset="50%" stop-color="#fbbc05" />
      <stop offset="50%" stop-color="#ea4335" />
    </linearGradient>
  </defs>
</svg>
<div class="icon"> 
<i class="fab fa-google fa-7x"></i>
<i class="fab fa-google fa-7x"></i>
</div>