Flutter Web 不显示 Material Design 图标答案

【问题标题】：Flutter Web not displaying Material Design IconsFlutter Web 不显示 Material Design 图标
【发布时间】：2019-09-27 18:47:00
【问题描述】：

我开始使用 Flutter web，我想将 Material 图标添加到我的 Flutter Web 应用程序中，但改为显示框。

感谢任何帮助。谢谢

【问题讨论】：

这不是错误。这是flutter web的局限性
但在示例中，图标显示
这看起来可能是字体的问题？您的 index.html 或 FontManifest 可能缺少材料图标

标签： dart flutter flutter-web

【解决方案1】：

来自flutter_web repository：

注意：有意省略了对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"
      }
    ]
  }
]

解决方案/解决方法

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

【讨论】：

您的 JSON 代码显示为 MaterialIcons-Extended.ttf，但您提供了指向 MaterialIcons-Regular.ttf 的链接。请编辑
@JideGuru JSON 来自 repo，下面是我的替代解决方案，因为我找不到 MaterialIcons-Extended.ttf。获得实际字体后将更新。
将"asset": "MaterialIcons-Regular.ttf" 放入 JSON 文件对我有用。
@Zerocchi 我无法更新 FontManifest.json 文件，因为我直接通过 azure 管道部署了 web flutter。那么您还有其他解决方案吗？

【解决方案2】：

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

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

【讨论】：

如果您更喜欢字体文件而不是网络参考，您可以在浏览器中打开link（即上面答案中发布的那个），下载文件并将扩展名更改为 .ttf 。在我的项目中，它也以这种方式工作。在这种情况下，在您的 FontManfest.json 中，您可以使用与答案相同的引用，但要像这样编写资产属性：“asset”：“fonts/MaterialIcons-Extended.ttf”

【解决方案3】：

只要确定

uses-material-design: true

与资产/图像平行存在于pubspec.yaml 中

【讨论】：

【解决方案4】：

当您将文件上传到服务器时，请确保“资产”文件夹也已上传。因为文件是批量上传到服务器的，文件夹形式的不会上传，需要单独上传。

【讨论】：