fix prepending icons and vertical alignment

Author: nielslyngsoe

packages/uui-input/lib/uui-input.element.ts

@@ -478,7 +478,8 @@ export class UUIInputElement extends UUIFormControlMixin(
 
       input {
         font-family: inherit;
-        padding: var(--uui-size-1) var(--uui-size-space-3);
+        padding: 1px var(--uui-size-space-3) var(--uui-size-1)
+          var(--uui-size-space-3);
         font-size: inherit;
         color: inherit;
         border-radius: var(--uui-border-radius);
@@ -502,6 +503,13 @@ export class UUIInputElement extends UUIFormControlMixin(
         border: none;
       }
 
+      slot[name='prepend'],
+      slot[name='append'] {
+        display: flex;
+        align-items: center;
+        line-height: 1;
+      }
+
       ::slotted(uui-input),
       ::slotted(uui-input-lock) {
         height: 100%;

packages/uui-input/lib/uui-input.story.ts

@@ -138,6 +138,15 @@ export const PrependAndAppend: Story = {
 };
 
 export const PrependIcon: Story = {
+  args: {
+    'prepend slot': html`<uui-icon
+      name="search"
+      slot="prepend"
+      style="padding-left:var(--uui-size-space-2)"></uui-icon>`,
+  },
+};
+
+export const PrependIconInDiv: Story = {
   args: {
     'prepend slot': html`<div slot="prepend">
       <uui-icon name="search"></uui-icon>