Jetpack Compose imageVector : how do I able to use the Social vector from google fonts

Viewed 291

I tried to import the icon provided by Google Font according to the prompts of Google Font, but I found that I could not import the icon of cake into my EditText. Can you please take a look what is going on ?Thank you so much !

@Composable
fun ShowTextField(context:Context){
  
    var text by remember {
        mutableStateOf("")
    }
    TextField(value = text ,
        onValueChange = {text = it},text
        label = { Text(text = "birthday")},
        leadingIcon = @Composable{
            
            Image(
                imageVector = Icons.Filled.Cake,
                contentDescription = "cake",
                modifier = Modifier.clickable { 
                    Toast.makeText(
                        context,
                        "Your Birthday:${text}",
                        Toast.LENGTH_SHORT
                    ).show()
                }
            )
        }
    )
}

Cake Google Font

1 Answers
  1. As far as I know, you need to download it as .svg file and import into the drawable folder as vector asset before you use it,
  2. after you import it, in your code you should use Icon(), not Image() and instead of imageVector just use painterResource(R.drawable.cake)

( of course if you named your asset as "cake" ;) )

@Composable
fun ShowTextField(context:MainActivity){

    var text by remember {
        mutableStateOf("")
    }

    TextField(value = text,
        onValueChange = {text = it},
        label = { Text(text = "birthday")},
        leadingIcon = @Composable{

            Icon(
                painterResource(R.drawable.cake),
                contentDescription = "cake",
                modifier = Modifier.clickable {
                    Toast.makeText(
                        context,
                        "Your Birthday:${text}",
                        Toast.LENGTH_SHORT
                    ).show()
                }
            )
        }
    )

}
Related