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/segmented-buttons/segmented-buttons.tsx

@@ -21,7 +21,7 @@ export const SegmentButton = forwardRef<
             ref={ref}
         >
             <IconWrapper icon={icon} iconPlace={iconPlace}>
-                {props.children}
+                <span className={'label-large'}>{props.children}</span>
             </IconWrapper>
             <span className={'m3 m3-button-segment-state-layer'} />
         </ButtonLayout>

src/styles/button-styles/segmented-button.sass

@@ -5,13 +5,19 @@ div.m3.m3-segmented-buttons
     border-radius: 20px
 
     & > button.m3.m3-button-segment
-        width: max-content
-        border-radius: 0
-        box-sizing: border-box
         height: 40px
+        border-radius: 0
         min-width: 108px
+        width: max-content
+        box-sizing: border-box
         border: 1px solid var(--md-sys-color-outline)
 
+        & > span
+            color: var(--md-sys-color-on-surface)
+
+        & > svg > text
+            fill: var(--md-sys-color-on-surface)
+
         &:not(:first-child)
             margin-left: -1px
 

src/styles/generics.css

@@ -718,13 +718,19 @@ div.m3.m3-segmented-buttons {
   border-radius: 20px;
 }
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment {
-  width: max-content;
-  border-radius: 0;
-  box-sizing: border-box;
   height: 40px;
+  border-radius: 0;
   min-width: 108px;
+  width: max-content;
+  box-sizing: border-box;
   border: 1px solid var(--md-sys-color-outline);
 }
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment > span {
+  color: var(--md-sys-color-on-surface);
+}
+div.m3.m3-segmented-buttons > button.m3.m3-button-segment > svg > text {
+  fill: var(--md-sys-color-on-surface);
+}
 div.m3.m3-segmented-buttons > button.m3.m3-button-segment:not(:first-child) {
   margin-left: -1px;
 }