Input Icon
Use icon within form control.
Use icon within form control.
All components are based on CodyFrame.
This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.
The Input Icon component is used to display an icon within the .form-control
element.
The default icon size is equal to 1em; therefore, it automatically resizes if you modify the font-size of the input elements.
Optionally, you can set a custom icon size by updating the --input-icon-size
custom property value:
.form-control-wrapper {
--input-icon-size: 1em; // icon size
--input-icon-text-gap: var(--space-xxs); // gap between icon and text
}
⭐️ Demo icons by Nucleoapp.com.
Report a bug + changelog on Github ↗ | Suggest new components ↗
📢 We use cookies to give you the best possible website experience. By using CodyHouse, you agree to our Privacy Policy.