Flutter - Deformed/overflowing custom icons using FlutterIcon.com

Question

I have a few custom icons (11 to be exact) that I added to my project using Flutter Icon. For most of these icons, everything is working as expected:

However, some of them just overflow out of their intended size, or are given a wrong size. No idea what the problem is, but here is how it looks like:

as you can see, the right side of the infinity loop is just hanging outside of its intended container (button). Also, if I try to be hacky and resize only the infinity icon, it appears to be offsetted to the right.

I can be hacky and create a custom size for the couple of troublesome icons, but I would like to know if there is something that I, or my designer (also me) can do to fix this properly.

Already Tried:

• Converting to compound path.
• Removing unnecessary tags such as <style> tags.
• Using flutter_svg package. This works okay, but it seems to be less performant that the Flutter Icon method. My app has quite a few animations running at the same time, and animating a SvgPicture is a little bit janky.

Answer 1

So I haven't been able to find out why the problem is happening, but I found out how to fix it.

1. After uploading your custom icons' svg's into FlutterIcon you'll download a .zip file. This file contains a bunch of files, including a .ttf file, which is a font file that contains your icons. You will need to manipulate the symbols/icons in that file in order to fix the issue.

2. To modify the faulty symbols, you will need to download some font editing application. FontForge does the trick. Download it and open the .ttf file you got from FlutterIcon from it. Once you have it open, you'll see a window full of squares with Xs in them. These are the font's glyphs.

3. You now need to find the glyphs with your icons. To save yourself from a LOT of scrolling, you can go to Encoding -> Compact from the toolbar. This will hide all unused (empty) glyphs. You should now be able to see all your icons. You should have something like this:

4. Right click the symbol you want to fix, and click Transform.... You will then be prompted with a menu that will let you transform the symbol in anyway you want. Apply transforms on all your faulty icons until you are satisfied. Transform window looks like this:

5. Once you have finish all your modifications, got to File -> Generate Font.... Select the destination folder and the file name (make sure it has the same name as the .ttf file generated from FlutterIcons). Also make sure you the TrueType file type from the first dropdown menu:

6. Once you're done, click generate, and voila! Now you have the .ttf file with the correctly-shaped icons. If you still find that something is wrong with the icons, you can rinse and repeat this process until you're satisfied with the result.