Icons don't render using custom icons

Question

I'm trying to use custom itens on Flutter, but the icon render like a square with a X inside.

I put the .ttf files on the assets folder.

custom_icons.dart

import 'package:flutter/widgets.dart';

class CustomIcons{
  CustomIcons._();

  static const _kFontFam = 'CustomIcons';

  static const IconData github_circled = const IconData(0xf09b, fontFamily: _kFontFam);
  static const IconData facebook_official = const IconData(0xf230, fontFamily: _kFontFam);
}

In pubspec.yaml I add this

fonts:
    - family : CustomIcon
      fonts:
        - asset: assets/fonts/FbIcon.ttf
        - asset: assets/fonts/GitIcon.ttf

I'm importing like this

import 'package:project/styles/custom_icons.dart';

And use like this

IconButton(
  icon: Icon(CustomIcons.facebook_official),
  disabledColor: Colors.black54,
  color: Colors.black54,
  iconSize: 40,
  onPressed: () => _launchURL("http://facebook.com")
)

How can I fix this issue

I fixed the problem, but don't looks right, I had to separate the two icons in diferents files like this (and withdraw the const parameter in the IconData)

import 'package:flutter/widgets.dart';

class FacebookIcon{
  FacebookIcon._();

  static const _kFontFam = 'facebook';

  static const IconData github_circled = IconData(0xf09b, fontFamily: _kFontFam);

}

and the same for the other icons, and on pubspec.yalm I did this

fonts:
    - family : facebook
      fonts:
        - asset: assets/fonts/FbIcon.ttf
    - family : github
      fonts:
        - asset: assets/fonts/GitIcon.ttf

Someone know why only worked with this way ?

Have you tried doing a hot reload or a full restart? – Sean Urgel May 08 '19 at 06:36 — Sean Urgel, May 08 '19 at 06:36

score 0 · Answer 1 · answered Jul 20 '22 at 14:42

in first code at custom_icons.dart

there is this line static const _kFontFam = 'CustomIcons'; in pubspec.yaml there is fonts: - family : CustomIcon fonts: - asset: assets/fonts/FbIcon.ttf - asset: assets/fonts/GitIcon.ttf

the family CustomIcon in pubsec and CustomIcons in custom_icons.dart are not refering to same font family

put one constant name and Fix.

Icons don't render using custom icons

1 Answers1