在看完 Image 元件後，另一個跟它很像的元件就是 Icon，一般 Icon 大多用於標示和裝飾，可以讓 UI 看起來更美觀且精緻。今天的耕讀筆記就以 Icon 為主題，看一下它的使用及設定方式。

Icon 元件

Icon 的參數設計和 Image 很類似，只要兩個必填參數，就可在 UI 上放一個圖示：

Icon(
    painter = painterResource("..."),
    contentDescription = "...",
)

除了傳入 Painter 類別做為 Icon 繪製來源外，其實更多時候會直接使用 Compose 內建的 androidx.compose.material.icons.Icons 向量圖示，並改以 imageVector 參數傳入即可：

Icon(
    imageVector = Icons.Filled.AccountCircle,
    contentDescription = "..."
)

若要查詢可用的圖示一覽表，可至 Google Fonts 搜尋。

為 Icon 上色

預設的 Icon 放在 UI 上看起來都是黑色的，但其實只要透過 tint 參數「染色」，就可以將圖示變成我們想要的顏色，這樣我們就不用製作各種顏色的圖檔了！

Icon(
    imageVector = Icons.Filled.Favorite,
    contentDescription = "...",
)

Icon(
    imageVector = Icons.Filled.Favorite,
    contentDescription = "...",
    tint = Color.Red,
)

在上面的例子裡，一個沒上色、一個以 tint 參數染成紅色，讀者可以將 Icon 左右併置後把程式碼運行起來，就可以看出其效果。

選擇 Icon 風格

由 Material Design 提供的圖示共有五種主題風格，開發者可以依照情境及 Design System 的規範選擇使用：

• Filled：使用單色填充。
• Outlined：無填充，以線條勾勒輪廓。
• Rounded：使用單色填充，同時邊角為圓角風格。
• TwoTone：使用單色填充，並以線條勾勒輪廓。
• Sharp：使用單色填充，同時邊角為尖角風格。

把 Icon 放在 TextField 裡

在研究 TextField 時，其中有 leadingIcon 及 trailingIcon 兩個參數可用來增加輸入框前後的圖示讓 UI 看起來更精緻，傳入的圖示類別可以是單純的圖示 Icon 或是帶有按鈕功能的 IconButton。當 IconButton 綁定事件後，就能與使用者做互動。

TextField(
    value = username,
    onValueChange = { username = it },
    label = { Text("Username") },
    leadingIcon = {
        Icon(
            imageVector = Icons.Filled.AccountCircle,
            contentDescription = "Username Icon"
        )
    }
)

TextField(
    value = password,
    onValueChange = { password = it },
    label = { Text("Password") },
    trailingIcon = {
        IconButton(
            onClick = { password = ""}
        ) {
            Icon(
                imageVector = Icons.Filled.Delete,
                contentDescription = "Delete Icon"
            )
        }
    }
)

在上面的例子裡，藉由綁定 IconButton 的 onClick 事件，就可以清空密碼欄位裡的文字，程式碼寫起來非常簡潔！

參考資料

• Icons
• Introducing Material Symbols