How to make leadingIcon in OutlinedTextField align to the top of the outline in Jetpack Compose?

Question

OutlinedTextfield is great as it provides a preformatted textfield that looks graet and that you can twek to your needs. One of the features is a leading Icon the issue is that it will always center vertically (see bottom of picture) and I really want it in the top corner of the outline along with the hint

Answer 1

This may be late but I figured out a solution. Add this to the modifier of your TextArea...

.height(IntrinsicSize.Min)

Next, the leading icon is a @Composable so wrap your icon in a box like this...

Box( contentAlignment = Alignment.TopCenter,
    modifier = Modifier
        .fillMaxHeight() 
        .padding(top = 16.dp ) 
   ) {
      Icon( imageVector = ImageVector.vectorResource(iconRes))
     }

The .fillMaxHeight makes the Box take the height of the TextArea and the padding pushes the Icon down to where you'd like it. I got the inspiration from this article.