CODEWITHSUNDEEP
flutter
Xavier Colomés
Xavier Colomés

Reputation: 71

Flutter: Material icons not showing when importing a custom Font

the original Material Icons in FLutter Icon(Icons.access_alarms) stop working every time I try to define a new custom font for my app.

What I do is to import the font in the pubspec.yamlfile correctly, include the "uses-material-design:true" and define the font in main ThemeData using the fontFamily property.


flutter:
  uses-material-design: true
  assets:
    - images/
  fonts:
    - family: Core Sans C
      fonts:
        - asset: Fonts/coresansc-45regular-webfont.ttf
          style: normal
          weight: 500

screenshot of the pubspec.yaml including the font definition

ThemeData kThemeLB = ThemeData(
    fontFamily: 'Core Sans C',
    backgroundColor: kBgColor1,
    primaryColor: kMainColor,
    // primarySwatch: kMainColor,
    textTheme: const TextTheme(
      bodyText1: TextStyle(
        color: kSecondaryColor,
      ),
    ),
    scaffoldBackgroundColor: kBgColor1);

And my main.dart

Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: kThemeLB,
      home: LoadLogin(),

My fonts DIR

Fonts dir

I can use FontAwesome Icons correctly, but still I'd like to know what the issue is.

I've been looking for a solution for a long time now but I can't seem to figure out what's the problem here. Any help is much appreciated thank!

Upvotes: 0

Views: 887

Answers (1)

Felipe Vergara
Felipe Vergara

Reputation: 869

Try move your files inside your assets dir, for example:

 - assets
 -- fonts
 --- **"your fonts inside fonts dir"**

after that modify your pubspec file, like this:

fonts:
 - family: coreSansC
 - fonts:
   - asset: assets/fonts/coresansc-45regular-webfont.ttf

finally modify your ThemeData, like this:

ThemeData kThemeLB = ThemeData(
    fontFamily: 'coreSansC',
    backgroundColor: kBgColor1,
    primaryColor: kMainColor,
    // primarySwatch: kMainColor,
    textTheme: const TextTheme(
      bodyText1: TextStyle(
        color: kSecondaryColor,
      ),
    ),

I recommend you use camelCase names.

Upvotes: 1

Related Questions