fix(elements): align ino-icon vertically (#1379)

Closes #1340

## Proposed Changes

- Added `vertical-alignment: middle;` to the ino-icon.
- Adjusted alignment settings for all parent components that are
affected by this change to ensure consistent vertical alignment

Parent components that needed adjustment:
- [x] ino-button
- [x] ino-chip
- [x] ino-icon-button (this also seemed to fix the misaligned ripple
issue that has been reocurring before)
- [x] ino-select

other components like the ino-avatar didnt need any refactoring

packages/elements/src/components/ino-button/ino-button.scss

@@ -62,6 +62,7 @@ ino-button {
   }
 
   .icon__wrapper {
+    display: inline-flex;
     height: 16px;
   }
 

packages/elements/src/components/ino-chip/ino-chip.scss

@@ -40,6 +40,9 @@ ino-chip {
     transition: ease-in-out 0.15s;
 
     .ino-chip-leading-icon {
+      display: flex;
+      justify-content: center;
+
       --ino-icon-width: #{$icon-size};
       --ino-icon-height: #{$icon-size};
     }

packages/elements/src/components/ino-icon-button/ino-icon-button.scss

@@ -41,6 +41,10 @@ ino-icon-button {
     background-color: $background-color;
     border-radius: 50%;
 
+    &__icon {
+      display: inline-flex;
+    }
+
     .mdc-icon-button__ripple::before,
     .mdc-icon-button__ripple::after {
       background-color: $background-active-color;

packages/elements/src/components/ino-icon/ino-icon.scss

@@ -21,6 +21,7 @@
   display: inline-flex;
   flex-direction: column;
   justify-content: center;
+  vertical-align: middle;
 
   i {
     font-size: inherit;

packages/elements/src/components/ino-select/ino-select.scss

@@ -137,7 +137,7 @@ ino-select {
     }
 
     .mdc-select__icon {
-      margin-top: 12px;
+      margin-top: 6px;
     }
 
     .mdc-select__dropdown-icon {
@@ -170,6 +170,10 @@ ino-select {
       margin-top: 16px;
     }
 
+    .mdc-select__icon {
+      margin-top: 2px;
+    }
+
     .mdc-floating-label.mdc-floating-label--float-above {
       top: 28px;
     }

packages/storybook/src/stories/ino-button/ino-button.scss

@@ -3,6 +3,7 @@
 #story--buttons-ino-button--leading-and-trailing-icon-inner {
   @include story-container {
     display: flex;
+    justify-content: center;
     column-gap: 20px;
   }
 }