ADDED: Icon wrapper for more elegant way to placement icon in buttons

TODO: Add styles for selected segmented button
DONE: Base styles for segmented buttons

src/primitive-components/button-components/button/button.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { forwardRef } from 'react';
-import { Icon } from '../../components';
 import { ButtonProps } from './button.types';
 import { bool, oneOf, string } from 'prop-types';
 import { ButtonLayout } from '../button-layout/button-layout';
+import { IconWrapper } from '../../icon/icon-wrapper';
 
 /**
  * Button component
@@ -14,10 +14,11 @@ import { ButtonLayout } from '../button-layout/button-layout';
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     (
         {
-            icon,
+            icon = undefined,
             className = '',
             disabled = false,
             variant = 'filled',
+            iconPlace = 'left',
             centralRipple = false,
             ...props
         },
@@ -30,8 +31,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             disabled={disabled}
             ref={ref}
         >
-            {icon ? <Icon iconSize={20}>{icon}</Icon> : <></>}
-            <span className={'label-large'}>{props.children}</span>
+            <IconWrapper icon={icon} iconPlace={iconPlace}>
+                <span className={'label-large'}>{props.children}</span>
+            </IconWrapper>
         </ButtonLayout>
     ),
 );