Jetpack Compose에서 둥근 테두리의 검색어 입력란 만들기

처음에는 돋보기 아이콘이 나오고, 입력이 시작되면 초기화 아이콘이 나온다.

var searchWord by remember { mutableStateOf("") }
TextField(value = searchWord,
  modifier = Modifier
    .fillMaxWidth()
    .wrapContentHeight()
    .border(1.dp, Color.Blue, CircleShape),
  colors = TextFieldDefaults.textFieldColors(
    textColor = Color.Gray,
    disabledTextColor = Color.Transparent,
    backgroundColor = Color.Transparent,
    focusedIndicatorColor = Color.Transparent,
    unfocusedIndicatorColor = Color.Transparent,
    disabledIndicatorColor = Color.Transparent
  ),
  placeholder = { Text(text = "플레이어 이름") },
  singleLine = true,
  trailingIcon = {
    if (searchWord.isNotBlank()) Icon(Icons.Filled.Clear, "", modifier = Modifier.clickable { searchWord = "" })
    else Icon(Icons.Filled.Search, "")
  },
  onValueChange = { searchWord = it })