如何通过Jetpack Compose中的图标访问Android Studio中的所有材料图标

7

Jetpack Compose拥有一个Icon可组合项,我可以访问一个imageVector。请参见下面的示例。

Icon(
     imageVector = Icons.Rounded.Email,
     contentDescription = "Email Icon",
)

为什么我不能通过这个imageVector访问Material Icons库中列出的所有图标,例如“wifi_off”无法访问。 通过imageVector只能访问非常有限的库。请参考以下链接:https://fonts.google.com/icons?selected=Material+Icons&icon.style=Rounded&icon.platform=android
2个回答

7

只需添加依赖项

implementation "androidx.compose.material:material-icons-extended:$compose_version"

并使用:

Icon(
    imageVector = Icons.Rounded.WifiOff,
    contentDescription = "Email Icon",
)

enter image description here

如文档所述:androidx.compose.material.icons 是在Compose中使用Material Icons的入口点,旨在提供与 fonts.google.com/icons 描述的图标相匹配的图标。
最常用的一组Material图标由androidx.compose.material:material-icons-core提供。
另一个库androidx.compose.material:material-icons-extended包含完整的Material图标集。


1
导入这个库之后,我的APK大小增加了约5M。正如Maven Repo页面所说:“这是一个非常大的依赖项,不应直接包含在内。”我们应该如何正确处理这个问题呢? - John 6
@John6 来自官方的Android文档:请注意,默认情况下只提供最常用的图标。您可以添加对androidx.compose.material:material-icons-extended的依赖,以访问每个图标,但请注意,由于此依赖的非常庞大,您应该确保使用R8 / ProGuard从应用程序中删除未使用的图标。https://developer.android.com/reference/kotlin/androidx/compose/material/icons/Icons - Mikhail
我已经解决了这个问题。实际上,我们不需要对ProGuard做任何操作,导致我的包大小增加的原因是因为我们团队中的某人添加了一个规则,保留了所有位于androidx包下的内容。 - John 6

2
非常感谢Gabriele Mariotti向我们指出了他的答案中扩展图标库。我想发布另一个答案,分享如何在使用Gradle管理依赖并构建应用程序时实现相同的效果(新方法)
如果:
  • 你的应用程序模块构建脚本是在 Gradle Kotlin DSL 中编写的,位于 app/build.gradle.kts

  • 你的依赖版本是在 版本目录 中维护的,位于 gradle/libs.versions.toml

  • 你的 Compose 库依赖使用 Compose BOM 进行版本控制(compose-bom);

然后我建议你这样依赖 Compose Material Icons Extended

  1. 将以下内容 添加到你的 gradle/libs.versions.toml[libraries] 部分中:
material-icons-extended = { group = "androidx.compose.material", name = "material-icons-extended" }
  • 将以下内容 添加到你的 app/build.gradle.kts 文件中的 dependencies 作用域下:
  • implementation(libs.material.icons.extended)
    
    1. 您的项目与Gradle构建文件同步

    现在,您应该能够像这样导入所有喜爱的Material Icons到您的应用中使用

    import androidx.compose.material.icons.Icons
    import androidx.compose.material.icons.outlined.Fastfood
    
    // ...
    
    Icon(
        imageVector = Icons.Outlined.Fastfood,
        contentDescription = "Burger and Soda",
    )
    

    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文,
    原文链接