flutterdartmobileicon-fonts

Flutter custom Icon Font not showing from package

I'm having trouble showing my custom icon font on screen. Android emulator as well as iOS emulator. I'm importing the icons via a package that generates the font. I previously had them directly in the app repository coming from assets/fonts. What has changed is that they now come from a package and that they are otf instead of ttf. But as far as I read, the current Flutter version should be able to display otf.

Below you can find a screenshot for iOS (left side) and Android (right side). enter image description here

environment:
  sdk: ">=3.0.0 <4.0.0"

dependencies:
  flutter:
    sdk: flutter
  my_font_package:
    git:
      url: git@github.com:MyOrg/my-font.git
      ref: 0.0.3

flutter:
  fonts:
    - family: My Font
      fonts:
        - asset: packages/my_font_package/fonts/my_font.otf

When I change the path to the otf in any way different, the build compiler will give me an expected error. So the path is finding the file.

import 'package:my_font_package/my_font.dart';

class MyIcon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Icon(
      MyFont.eyesolid,
      color: Colors.primary,
      size: 24.0,
    );
  }
}

In the font package:

class MyFont{
  const MyFont._();

  static const iconFontFamily = 'My Font';
  static const iconFontPackage = 'my_font';

  /// Font icon named "__eye-closed__"
  ///
  /// <image width='32px' src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpY29uIGljb24gaWNvbi1leWUtY2xvc2VkIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMjEgOWMtMi40IDIuNjY3IC01LjQgNCAtOSA0Yy0zLjYgMCAtNi42IC0xLjMzMyAtOSAtNCIvPjxwYXRoIGQ9Ik0zIDE1bDIuNSAtMy44Ii8+PHBhdGggZD0iTTIxIDE0Ljk3NmwtMi40OTIgLTMuNzc2Ii8+PHBhdGggZD0iTTkgMTdsLjUgLTQiLz48cGF0aCBkPSJNMTUgMTdsLS41IC00Ii8+PC9zdmc+'>
  static const IconData eyeclosed = IconData(0xe015,
      fontFamily: iconFontFamily, fontPackage: iconFontPackage);
}

I have flutter clean, cleaned the cache, turned off the simulator and rebuilt the app multiple times. I'm therefore adding a new question here to see if there are other aspects I have missed.

Interesting aspect: Android Studio also doesn't give me a preview. enter image description here

Perhaps this gives the right direction, or it is a distraction. Who knows? The previous to the material design icons are working great.

Solution

  • The solution is tricky but visible here.

    The font is not a package itself. The class gets to be delivered to the implementation. This is why defining the property fontPackpage in the IconData is wrong.

    This is wrong since the class and the font are in the same package.

    static const IconData myIcon = IconData(0xe015,
      fontFamily: iconFontFamily, fontPackage: iconFontPackage);

    It should be:

    static const IconData myIcon = IconData(0xe015,
      fontFamily: iconFontFamily);

    The result

    enter image description here