Flutter 图标不显示

Question

I am trying to complete this Flutter Code Lab, but the icons do not appear in my application. But they appears in Android Studio code: I have been included the lib in my file pubspec.yaml

name: startup_namer
description: A new Flutter application.

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.0
  english_words: ^3.1.0

But result is this:

My main.dart file looks like this:

// Add the heart icons to the ListView.

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';


void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {

   ..... 

  Widget _buildRow(WordPair pair) {
    final bool alreadySaved = _saved.contains(pair);

    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
      trailing: new Icon(
        alreadySaved ? Icons.favorite : Icons.favorite_border,
        color: alreadySaved ? Colors.red : null,
        size: 22.0,
      ),
      onTap: () {      
        setState(() {
          if (alreadySaved) {
            _saved.remove(pair);
          } else {
            _saved.add(pair);
          }
        });
      },
    );
  }
}

I thought that is because I use iOS emulator, but when I tried with Android emulator the result was the same.

Answer 1

(Copied from the comments)

You need to set uses-material-design: true in pubspec.yaml for the icons to be included in the app.

Answer 2

In my case, I have written uses-material-design: true in pubspec.yaml file. I am able to solve this problem by restarting the Android emulator. You can also try by uninstalling old build from your emulator and then installing the new one.

This is little weird behavior, but it works for me.

Answer 3

如果您使用 FlutterIcons 库，请确保 pubspec.yaml 中的字体系列与my_flutter_app_icons.dart文件中声明的字体系列相匹配。

Answer 4

Hot reloading does not show changes in resources. Press the stop button square red color in the top action menu bar of android studio and run the app again.

It works.

Answer 5

I assume we're talking about the flutter_icons package?

I had to kill the app entirely and reinstall it and they started working for me. Not sure why a hot reload didn't do the trick.

Answer 6

Just delete the App from emulator/physical device on which you are working and again build the app. It works for me and will surely works for you.

Answer 7

You need to set uses-material-design: true in pubspec.yaml for the icons to be included in the app.

Be sure to have a uses-material-design: true entry in the flutter section of your pubspec. yaml file. It allows you to use the predefined set of Material icons. Many Material Design widgets need to be inside of a MaterialApp to display properly, in order to inherit theme data.

Answer 8

Please try:

1. Stopping the app
2. Running flutter clean in your app directory
3. Deleting the app from your simulator / emulator / device
4. Rebuild & Deploy the app.

Answer 9

Icon changing to Chinese character was resolved by adding the correct path to the fonts folder. Specify, the correct path to your fonts folder by providing proper indentations:

• Flutter Clean
• Remove Build From your testing device/Emulator
• Run the app

Answer 10

this was issue for me

Make sure in pubspec.yaml file all the images and fonts have correct path and if you have added new image recently try to remove that and then rebuild

Answer 11

The icons were loading normally on all devices except android for me. To fix it I simply:

Before

Icon(
       Icons.chevron_left,
          size: 40.0,
          color: Colors.white,
        ),

After

  Icon(

       MdiIcons.chevronLeft,
          size: 40.0,
          color: Colors.white,
        ),

Steps

1. Add to pubspec yahml

dependencies: material_design_icons_flutter: ^4.0.5955

2. Add this to the file you want the icon

import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';

3. Instead of Icons.NameHere use MdiIcon.NameHere

Answer 12

The problem started in my project when I included my app within GetMaterialApp instead of MaterialApp Widget. All Material icons started to look like [X].

Answer 13

Add the following to your pubspec.yaml:

flutter: 
  uses-material-design: true

Took me a while to figure out based on the answers above that uses-material-design is a property of flutter , not of the root.

Answer 14

if all the above not worked then run flutter pub run flutter_launcher_icons:main