Flutter Web 未显示 Material 设计图标

Question

我开始 Flutter web，我想将 Material 图标添加到我的 Flutter 网络应用程序中，但它显示的是框。

感谢任何帮助。谢谢

Answer 1

注意：有意省略了对 MaterialIcons 的引用，因为相应的字体未包含在此源中。

如果将MaterialIcons-Extended.ttf添加到该目录，则可以更新FontManifest.json如下：

[
  {
    "family": "MaterialIcons",
    "fonts": [
      {
        "asset": "MaterialIcons-Extended.ttf"
      }
    ]
  },
  {
    "family": "GoogleSans",
    "fonts": [
      {
        "asset": "GoogleSans-Regular.ttf"
      }
    ]
  },
  {
    "family": "GalleryIcons",
    "fonts": [
      {
        "asset": "GalleryIcons.ttf"
      }
    ]
  }
]

Solution/Workaround

下载 MaterialIcons-Regular.ttf here，将其放入您的 assets 文件夹并相应地更新您的 FontManifest.json。

Answer 2

According to this 您可以直接将 Material 图标添加到 FontManifest.json 中，如下所示。

[
  {
    "family": "MaterialIcons",
    "fonts": [
      {
        "asset": "https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2"
      }
    ]
  }
]

Answer 3

只要确定

uses-material-design: true

与资产/图像

平行出现在pubspec.yaml中

Answer 4

将文件上传到服务器时，请确保 'assets' 文件夹也已上传。因为文件是批量上传到服务器的，文件夹形式的文件是不上传的，需要单独上传。

Answer 5

这解决了我的问题：构建 Web 输出后，查看文件夹 build/web/assets/fonts。如果有一个文件名为：MaterialIcons-Regular.otf 然后将其添加到 pubspec.yaml:

- family: MaterialIcons
  fonts:
    - asset: fonts/MaterialIcons-Regular.otf

和FontManifest.json（在路径web/assets/FontManifest.json）：

{
"family": "MaterialIcons",
"fonts": [
  {
    "asset": "fonts/MaterialIcons-Regular.otf"
  }
]

}

注意字体文件的格式。它是 otf 而不是 ttf

Answer 6

在我的项目中，字体系列是在 pubspec.yaml 中定义的，没有大写字母，但我在我的代码中以大写字母开头引用了它。

只要我在 Android 上进行测试，这就没有问题：图标无论如何都会出现。但显然它在为 web 编译时确实有所不同。因此那里没有显示图标。

由于网络上到处都提到旧版本的 flutter 上的图标字体问题，我在这里完全走错了路:-)

Flutter Web 未显示 Material 设计图标

Flutter Web not displaying Material Design Icons

dart

flutter

flutter-web