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...

[nook24]

Is it possible to disable SVG rendering with angular-fontawesome?
When using the mask gradient workaround, the mask has an background color, which is ugly if the background color can be dynamic like on hover or so

Something like this would be perfect

<fa-icon
    [icon]="['fas', 'plug-circle-check']"
    [size]="'4x'"
    [svg]="false"
    class="my-gradient"></fa-icon>

Workaround

As this issue is open for 5+ years, I have have no hopes for a proper solution any time soon.

If you need to apply a gradient to angular-fontawesome, you need to use the mask option. The issue is, that your icon will have a background color, which will not work when you use the icon inside of a table where the background changes on hover or if the icon is placed on top of an image.

Also for some reason, the icon is clipped.

.status-production {
    background: radial-gradient(at 80% 72%, rgba(0, 200, 81, 1.0) 0%, rgba(0, 200, 81, 1.0) 30%, #4285F4 33%, #7DACF5 100%);
    color: var(--cui-body-bg); /* Dynamic bg-color for light and dark mode */
    display: inline-block;
}

<fa-icon
    [mask]="['fas', 'square-full']"
    [icon]="['fas', 'plug-circle-check']"
    [size]="'4x'"
    class="status-production"></fa-icon>

My solution for this is, to import Font Awesome globally in styles.css.

@import "@fortawesome/fontawesome-free/css/all.css";

This enables the option to use Font Awsome as a web font and solves the gradient issue and I can also use the icons in third party libraries through the unicode value. Also no clipping.

.status-production {
    background-image: radial-gradient(at 80% 72%, rgba(0, 200, 81, 1.0) 0%, rgba(0, 200, 81, 1.0) 30%, #4285F4 33%, #7DACF5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

<i class="fas fa-plug-circle-check fa-4x status-production"></i>