feat(metricInput): add icon variations property in metric input compo…

…nent

core/components/atoms/metricInput/MetricInput.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Button, Icon, Text } from '@/index';
 import { BaseHtmlProps, BaseProps, extractBaseProps } from '@/utils/types';
-import { AutoComplete } from '@/common.type';
+import { AutoComplete, FontVariationType } from '@/common.type';
 
 export type MetricInputSize = 'regular' | 'large';
 
@@ -32,6 +32,19 @@ export interface MetricInputProps extends BaseProps, BaseHtmlProps<HTMLInputElem
    * Material icon name
    */
   icon?: string;
+  /**
+   * Set font-variation-settings CSS property for Icons
+   *
+   * <pre className="DocPage-codeBlock">
+   *  FontVariationType: {
+   *    fill?: number;
+   *    weight?: number; Range: [100, 700]
+   *    grade?: number; Range: [-25, 200]
+   *    opticalSize?: number; Range: [20px, 48px]
+   *  }
+   * </pre>
+   */
+  iconVariations?: FontVariationType;
   /**
    * Label to be displayed inside `MetricInput` before value
    */
@@ -134,6 +147,7 @@ export const MetricInput = React.forwardRef<HTMLInputElement, MetricInputProps>(
     value: valueProp,
     showActionButton = true,
     onKeyDown,
+    iconVariations,
     ...rest
   } = props;
 
@@ -262,6 +276,7 @@ export const MetricInput = React.forwardRef<HTMLInputElement, MetricInputProps>(
         <Icon
           data-test="DesignSystem-MetricInput--icon"
           name={icon}
+          variations={iconVariations}
           size={sizeMapping[size]}
           appearance={!value ? 'disabled' : 'subtle'}
           className={iconClass}