Feature request: inset gradients!

[SteamWind]

Describe the problem you'd like to see solved or task you'd like to see made easier

A way to apply inset gradients on icons.

Is this in relation to an existing part of angular-fontawesome or something new?

This is new for angular-fontawesome but not for Font-Awesome as described here:
FortAwesome/Font-Awesome#11925

What is 1 thing that we can do when building this feature that will guarantee that it is awesome?

Make it easy to use 🌟

Why would other angular-fontawesome users care about this?

Because gradients are beautiful ✨

On a scale of 1 (sometime in the future) to 10 (absolutely right now), how soon would you recommend we make this feature?

6 - This feature was easy to implement with the oldest version...

---

Thank you for your precious work!

[devoto13]

As discussed in the linked issue it is not possible to use CSS gradients with SVG icons, so you'll have to use SVG gradients instead. The solution described in FortAwesome/Font-Awesome#11925 (comment) should work with angular-fontawesome as well. Does it work for you?

fa-icon ::ng-deep svg * {
  fill: url(#lgrad);
}

As for the nicer API I'm not sure:

• Currently angular-fontawesome is using @fortawesome/fontawesome-svg-core to render icons, so to introduce this feature it first needs to be implemented in @fortawesome/fontawesome-svg-core package.
• And even if it were to add such a feature this will only solve one very specific problem in a rather limited way. IMO we should rather think about how we can make it easier to use various SVG features (like gradients) together with fa-icon component.

Having said that I would like to hear more ideas and feedback on this feature request.

[seanreiser]

Have you considered using a mask to accomplish this,? Here's a codepen I through together using a rainbow gradient for the apple icon.

https://codepen.io/seanreiser/pen/QWLaZZp

[SteamWind]

Only if this was such easy. @seanreiser this is the angular component. Here is an exemple with your solution:
https://stackblitz.com/edit/fontawesome-angular-gradient-background-173

[devoto13]

@SteamWind https://stackblitz.com/edit/angular-z8v4ux-5jecuk

[SteamWind]

Nice solution @devoto13 !
I modified your solution to work with any icons with a specific class.

https://stackblitz.com/edit/fontawesome-angular-gradient-background-fix-173

This could be documented somewhere?

[SteamWind]

The only problem with this solution is that you can't have a transparent mask... I consider this should not be an end solution.
I let this open as it could be a feature.

[devoto13]

This could be documented somewhere?

Sure. Was thinking to introduce a Recipes section in the documentation to include docs on how to implement common things. I'll take a look at it, when I have time.

The only problem with this solution is that you can't have a transparent mask.

Can you provide an example of what is "transparent mask"? Something like this?

[SteamWind]

Nice effect but no, I mean, if you already have a gradient in background of your icon, the square mask cover a part of it. It's the principle of the mask. You can see what I mean here:

Also, if you don't know the background color, that's a problem...