在 Android Jetpack Compose 中使用 Material Design Icon 小圖示 示範

現在在 Android 的 Jetpack Compose 專案中應該預設都有使用 material3 套件了，有安裝的話可以從 build.gradle.kts(Module :app) 中看到下面程式碼中的第二行:

    
dependencies {
    implementation("androidx.compose.material3:material3")
}
    

已經安裝的話就可以直接從程式碼中使用 Material Design 的 Icon 了，不用再去手動下載然後再匯入圖片資源。不過具體該怎麼使用呢？

查看所有可用的 Icon

先開啟 Google Fonts 的 Icon 網頁，在左側的 Style 的第二個下拉式選單選擇想要的主題，有 Filled, Outliend, Rounded, TwoTone, Sharp，所有主題擁有的圖示是相同的，只是視覺風格不同。通常整個應用程式會使用同一種主題。

筆者這裡選擇的主題是 Outlined ，後找到想要的 Icon，記下 Icon 下方的名稱，例如第一個放大鏡圖示是 Search

使用 Icon

在 Android Studio 中的 Jetpack Compose 專案，就可以使用下方程式碼使用 Icon 元件顯示 Icon:

    
Icon(Icons.Outlined.Search, contentDescription = "搜尋")
    

Icon 的第一個參數是圖片，第二個參數是內容替代文字，主要用於無障礙使用。
而 Icons.Outlined.Search 這個 Icon 第一個逗號後面就是上面提到的「主題」，第二個逗號後面就是圖片下的英文，如果有多個單字組成，例如第三個 Account Circle ，就是去除空白，使用 AccountCircle

BTY，import 內容如下:

    
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Search
import androidx.compose.material3.Icon
    

參考資料：
Google Fonts Icons
Android Developers - androidx.compose.material.icons