How to Add Material Design Icons In Flutter Web ?

· 2 min read
How to Add Material Design Icons In Flutter Web
How to Add Material Design Icons In Flutter Web

Hello Guys !!! Hope you people are enjoying our article based on flutter !!! In today’s article, we will go through How to Add Material Design Icons In Flutter Web so are you ready?

How to Add Material Design Icons In Flutter Web?

To Add Material Design Icons to the flutter web follow the below steps: From flutter_web repository:

Note: a reference to Material Icons is intentionally omitted because the corresponding font is not included in this source.

If you add MaterialIcons-Extended.ttf to this directory, you can update FontManifest.json as follows:

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

Solution/Workaround

Download MaterialIcons-Regular.ttf here put it inside your assets folder, and update your FontManifest.json accordingly.

So According to this, you can directly add Material Icons to FontManifest.json as shown below.

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

So Just make sure that

uses-material-design: true

is present in pubspec.yaml parallel to assets/images

Conclusion:

So in this article, we have been through How to Add Material Design Icons In Flutter web?

Keep Learning !!! Keep Fluttering !!!

Do let us know in the comments if you are still confused in flutter!! We are happy to help:)

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply