Center input icons in small and large inputs and selects (#3299)

.changeset/input-icon-sizes.md

@@ -0,0 +1,6 @@
+---
+"@tabler/core": patch
+"@tabler/docs": patch
+---
+
+Fixed `.input-icon` icons off-center in small and large inputs and selects: the addon follows the control size.

core/scss/ui/forms/_form-icon.scss

@@ -4,6 +4,7 @@
 .input-icon {
   --input-icon-padding-end: #{$input-icon-padding-end};
   --input-icon-padding-start: #{$input-icon-padding-start};
+  --input-icon-addon-height: #{input-height-token()};
   position: relative;
 
   .form-control:not(:last-child),
@@ -15,6 +16,14 @@
   .form-select:not(:first-child) {
     padding-inline-start: var(--input-icon-padding-start);
   }
+
+  &:has(> .form-control-sm, > .form-select-sm) {
+    --input-icon-addon-height: #{input-height-token('sm')};
+  }
+
+  &:has(> .form-control-lg, > .form-select-lg) {
+    --input-icon-addon-height: #{input-height-token('lg')};
+  }
 }
 
 .input-icon-addon {
@@ -28,7 +37,7 @@
   align-items: center;
   justify-content: center;
   min-width: var(--input-icon-addon-width);
-  height: input-height-token();
+  height: var(--input-icon-addon-height, #{input-height-token()});
   font-size: 1.2em;
   color: var(--icon-color);
   pointer-events: none;

docs/content/ui/forms/elements.mdx

@@ -104,6 +104,29 @@ Put an [icon](/ui/components/icon) inside an input to hint at what goes in it, o
 </div>
 </Example>
 
+The icon follows the size of the input, set with `.form-control-sm` or `.form-control-lg`.
+
+<Example column>
+<div class="input-icon mb-2">
+  <span class="input-icon-addon">
+    <Icon name="search" />
+  </span>
+  <input type="text" value="" class="form-control form-control-lg" placeholder="Large input" />
+</div>
+<div class="input-icon mb-2">
+  <span class="input-icon-addon">
+    <Icon name="search" />
+  </span>
+  <input type="text" value="" class="form-control" placeholder="Default input" />
+</div>
+<div class="input-icon">
+  <span class="input-icon-addon">
+    <Icon name="search" />
+  </span>
+  <input type="text" value="" class="form-control form-control-sm" placeholder="Small input" />
+</div>
+</Example>
+
 ## Separated inputs
 
 Include an additional element in your input section, such as a [button](/ui/components/button) which can be used to submit the information entered in the input control.