Flutter Font Awesome Kit - Adding Custom Svgs

[kkruel8100]

Having problems loading custom svgs from downloaded kit and not finding documentation for adding to Flutter that addresses specifically the custom svgs.

• Downloaded a custom kit for flutter font awesome.
• Following documentation and copied the webfonts/ttf files and metadata/icons.json file under the fonts directory.
• Ran ./configurator.sh
• Received confirmation that "Custom icons.json found, generating files" .... "Done"
• Custom svgs are not included in the file

When I look at the kit files, the icons.json does not contain the custom svgs. I can find the custom svgs under svgs/custom-icons. There is also a js/custom-icons.js file. I attempted to create a new directory and copy the custom svgs into the directory.

font_awesome_flutter
lib
custom_icons
fonts

Unclear what files need to be copied to the project from the kit, what directories to create, and what scripts to run to get the custom svgs to show up. Also, don't know how to reference the custom svgs once they are added. Normal icons are referenced by "FontAwesomeIcons.xxx".

Can you provide some guidance?

Thank you.

[kkruel8100]

Also, the custom-icons.ttf contains 2 of the 61 custom icons. So 59 are missing from that file. None of the custom icons are in the icons.json file so all 61 custom icons are missing from that file.

In addition, this is on a pro account.

Any help would be greatly appreciated.

[Marrsh]

Had the same issue, found a good guide here converting the svg to a font and then using the standard Icon class to display it.

[kkruel8100]

I took the suggestion to utilize FlutterIcon.com for the files. I was able to get a ttf file that shows all the custom icons created. I also have the dart file. Added both of them to the application along with a pub spec reference to the icons.

When running the app, the icons don't render properly. Web all render with 6 bars instead of the icon. Inspecting the ttf file shows the proper icons. I did flutter clean. Also, verified that the pub spec file has uses-material-design set to true.

Wrapped with both Icon and FaIcon and both have same render result.

Attempted running it in both debug and release mode and same result. Any additional ideas?

Below is a screenshot. I can target the size and color. The default icon shows as black.

In Chrome, it shows as this.

In mobile, it shows as this.

So it doesn't render properly in both web and mobile.

[kkruel8100]

I've been able to resolve the issue. Thank you for your assistance.

The final key of the puzzle for the FlutterIcon.com process is updating the dart file. The file has a _kFontPkg optional property set to null. This needed to be updated with the package name inside the project.

[virtualmarc]

We have the same problem, we have a kit with some custom icons.

The custom icons ttf contains all custom icons, but the icons.json does not, neither does the generator add the custom Icons as constants to the FlutterFontAwesome class.

Adding custom icons support should be pretty easy, the only problem is, that the icons are not listed in the icons.json, so the ttf has to be parsed to get the list of available icons and their codepoints.

If FontAwesome would add the custom icons to the icons.json with style custom when they create the kit zip File on the website, we just need to add the custom-icons.ttf to the pubspec.yaml, add a new IconData Class (IconDataCustom) to icon_data.dart referencing the custom font and add all Icons (except the font-awesome Icon) as a const to the FlutterFontAwesome class.

[kkruel8100]

I was surprised that this wasn't handled in the kit zip file and the icons.json. Further surprising was that the documentation failed to address custom icons while at the same time the kit was advertised/marketed to be able to do this exact functionality. I agree that it should be easy for FontAwesome to address it, as well as updating their documentation.

Fortunately, we were able to find a work around even though it added additional manual steps and will be somewhat cumbersome to maintain with update.

[RamazanTimurNevomes]

Hi eveyone,
I have pro icons. I did flowed "Enable pro icons" steps but i can not enamled. i need help.

[ldowens]

I also ran into this issue and used the workaround outlined here.
I tried adding my custom icons to icons.json myself since they are missing, but ended up with an overlap of the codepoints with existing fa icons, so had to bail on that solution. Maybe there's a way to avoid that, but I don't know how to get unique ones with certainty.

FYI: I contacted FontAwesome about the icons missing from icons.json and their support folk said it is a known bug when you have auto-subsetting enabled and is being tracked. They claim that if you use custom subsetting the custom icons will be properly included, but since that requires you to know and manually select all icons you want to use in the kit, that isn't super convenient - the workaround outlined above seems better.

[DanielJaramillo94]

The generated code after running configurator.sh generates this

 /// Custom my-custom icon
 ///
 /// https://fontawesome.com/icons/my-custom?style=custom
 static const IconData myCustomIcon = IconDataCustom(0xe003);

But I'm getting an error because IconDataCustom class does not exists.