ADDED: Now you can turn on or off Ripple effect on buttons (not for icon buttons, soon it's fixed), density for segmented-buttons, typography mixins, and etc.

CHANGED: For optimizing write styles added a few mixins
FIXED: Bug with width in segmented-buttons

src/styles/button-styles/icon-button.sass

@@ -1,16 +1,15 @@
 button.m3.m3-icon-button
-    transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
-    contain: content
-    border-radius: 50%
-    position: relative
-    display: inline-flex
-    flex-direction: row
-    justify-content: center
-    align-items: center
+    @include center(inline-flex)
+
+    padding: 0
     width: 40px
     height: 40px
     border: none
-    padding: 0
+    contain: content
+    border-radius: 50%
+    position: relative
+    flex-direction: row
+    transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
 
     &::before
         transition: background-color, box-shadow, .2s cubic-bezier(0.2, 0, 0, 1) !important
@@ -93,10 +92,10 @@ button.m3.m3-icon-button
         & > .m3.m3-ripple-domain > .m3.ripple
             background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 12%, transparent)
 
-        &:not(.outlined).toggled.selected> .m3.m3-ripple-domain > .m3.ripple
+        &:not(.outlined).toggled.selected > .m3.m3-ripple-domain > .m3.ripple
             background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent)
 
-        &:not(.default).toggled.selected> .m3.m3-ripple-domain > .m3.ripple
+        &:not(.default).toggled.selected > .m3.m3-ripple-domain > .m3.ripple
             background-color: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent)
 
     &.tonal:not(:disabled)