feat(input): add icon variations property in input component

core/components/atoms/input/Input.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { Tooltip, Icon, Text } from '@/index';
 import { IconProps } from '@/index.type';
 import { BaseHtmlProps, BaseProps, extractBaseProps } from '@/utils/types';
-import { AutoComplete } from '@/common.type';
+import { AutoComplete, FontVariationType } from '@/common.type';
 import ActionButton from './actionButton';
 
 export type InputType = 'text' | 'password' | 'number' | 'email' | 'tel' | 'url';
@@ -41,6 +41,19 @@ export interface InputProps extends BaseProps, BaseHtmlProps<HTMLInputElement> {
    * 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 `Input`
    */
@@ -170,6 +183,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, forw
     autoFocus,
     disabled,
     readOnly,
+    iconVariations,
     ...rest
   } = props;
 
@@ -238,7 +252,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, forw
       )}
       {size !== 'tiny' && icon && (
         <div className={leftIconClass}>
-          <Icon name={icon} size={sizeMapping[size]} />
+          <Icon name={icon} size={sizeMapping[size]} variations={iconVariations} />
         </div>
       )}
       <input