feat(icon): add icon gradient API

elements/rh-icon/demo/gradient-fill.html

@@ -0,0 +1,20 @@
+<rh-icon icon="new-fill" set="ui" gradient-fill></rh-icon>
+<rh-icon class="custom-gradient" icon="check-circle-fill" set="ui" gradient-fill></rh-icon>
+
+<script type="module">
+  import "@rhds/elements/rh-icon/rh-icon.js";
+</script>
+
+<style>
+  .custom-gradient {
+    /* Color 1 */
+    --rh-icon-gradient-color-stop-1: var(--rh-color-blue-40, #4394e5); 
+    /* Color 2 */
+    --rh-icon-gradient-color-stop-2: var(--rh-color-green-40, #87bb62);
+  }
+
+  :root {
+    /* For demo purposes only */
+    --rh-icon-size: var(--rh-size-icon-06);
+  }
+</style>

elements/rh-icon/rh-icon.css

@@ -12,7 +12,9 @@
 svg {
   /** Override default icon size */
   width: var(--rh-icon-size, var(--rh-size-icon-01, 16px));
-  fill: currentcolor;
+
+  /** color of the icon */
+  fill: var(--rh-icon-fill, currentcolor);
   aspect-ratio: 1/1;
 }
 
@@ -25,3 +27,26 @@ svg {
   max-width: 12px;
   width: var(--rh-icon-size, 12px);
 }
+
+.gradient-fill {
+  --rh-icon-fill: url('#svg-gradient');
+}
+
+#svg-gradients {
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
+#svg-gradient {
+  --_icon-gradient-color-stop-1:
+    /** color of the gradient's 1st stop */
+    var(--rh-icon-gradient-color-stop-1,
+      var(--rh-color-red-50, #ee0000)
+    );
+  --_icon-gradient-color-stop-2:
+    /** color of the gradient's 2nd stop */
+    var(--rh-icon-gradient-color-stop-2,
+      var(--rh-color-purple-50, #5e40be)
+    );
+}

elements/rh-icon/rh-icon.ts

@@ -96,6 +96,14 @@ export class RhIcon extends LitElement {
    */
   @property() loading?: 'idle' | 'lazy' | 'eager' = 'lazy';
 
+  /**
+   * Adds gradient fill to icon.
+   * Default color stops can be overwritten by using its CSS Custom Properties.
+   * - `--rh-icon-gradient-color-stop-1`
+   * - `--rh-icon-gradient-color-stop-2`
+   */
+  @property({ attribute: 'gradient-fill', reflect: true, type: Boolean }) gradientFill = false;
+
   /** Icon content. Any value that lit can render */
   @state() private content?: unknown;
 
@@ -113,10 +121,21 @@ export class RhIcon extends LitElement {
   render(): TemplateResult {
     const { set } = this;
     const content = this.#getContent();
+    const gradientFill = (this.gradientFill === true) ? 'gradient-fill' : '';
+    console.log(gradientFill);
+
     return html`
+      ${!this.gradientFill ? '' : html`
+      <svg id="svg-gradients" aria-hidden="true" focusable="false">
+        <linearGradient id="svg-gradient" x2="1" y2="1">
+          <stop offset="0%" stop-color="var(--_icon-gradient-color-stop-1)" />
+          <stop offset="100%" stop-color="var(--_icon-gradient-color-stop-2)" />
+        </linearGradient>
+      </svg>
+      `}
       <div id="container"
            aria-hidden="${String(!!content)}"
-           class="${classMap({ [set]: true })}">${!isServer ? content
+           class="${classMap({ [set]: true, [gradientFill]: true })}">${!isServer ? content
         : unsafeHTML(content as unknown as string)}<!--
            Container for the fallback (i.e. slotted) content
         --><span part="fallback" ?hidden="${content}"><!--