Fill font awesome icon with loading animation - html

Question

Issue
I am trying to use a font awesome icon fas fa-cannabis and add a fill effect, now I have part of the CSS down, I can see the loading animation but I can't get it to fill inside the font awesome icon. So all I basically want to do is put that fill effect that you can see below inside of the font awesome icon.
Here is the CodePen for the question
At the moment it is sitting underneath the font awesome icon. Which you can see below:
Code
So my HTML is as follows:
<i class="fas fa-cannabis" id="banner">
<div class="fill">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
</svg>
</div>
</i>
With the following CSS that is creating the fill effect:
#banner {
width: 150px;
height: 150px;
overflow: hidden;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
}
#banner .fill {
animation-name: fillAction;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-duration: 4s;
animation-fill-mode: forwards;
}
#banner #waveShape {
animation-name: waveAction;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 0.5s;
width:300px;
height: 150px;
fill: #04ACFF;
}
#keyframes fillAction {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, -5px);
}
}
#keyframes waveAction {
0% {
transform: translate(-150px, 0);
}
100% {
transform: translate(0, 0);
}
}

Answer 1

You can use mix-blend-mode:screen; For this I'm wrapping both the i and the fill in a div and set i{position:absolute}. Please take a look at the codepen demo
#wrap{height: 150px;
width:150px;
overflow: hidden;
border:1px solid;
}
#banner {
height: 150px;
width:150px;
}
.fill {
animation-name: fillAction;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-duration: 4s;
animation-fill-mode: forwards;
mix-blend-mode:screen;
}
#waveShape {
animation-name: waveAction;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 0.5s;
width:300px;
height: 150px;
fill: #04ACFF;
}
#keyframes fillAction {
0% {
transform: translate(0, 150px);
}
100% {
transform: translate(0, -5px);
}
}
#keyframes waveAction {
0% {
transform: translate(-150px, 0);
}
100% {
transform: translate(0, 0);
}
}
i{font-size:147px; background:#fff;}
#wrap i{position:absolute}
<div id="wrap">
<i class="fas fa-cannabis" id="banner"></i>
<div class="fill">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
</svg>
</div>
</div>

Answer 2

You might need to use clipping paths to apply the fill only to the icon. You might also need to use an svg rather than an icon...
This article has some interesting info that may help: https://css-tricks.com/masking-vs-clipping-use/