Custom Icons

Steps to convert SVG assets to IconData font assets.

We will be using FlutterIcon - Flutter custom icons generator. But, if we directly upload the svg file to it, the icon glyphs may not displayed correctly, eg very small icon in weird position. Thus, we need to fix it first.

Fix SVG

1. Open svg file in Inkscape.
2. (Optional) Select all (Ctrl + A) to made the icon more visible.
3. Go to Object > Ungroup
4. Go to Path > Break Apart.
5. Select All (Ctrl + A), and go to Path > Union.
6. Go to Path > Combine
7. Go to File > Open Document Properties
8. In the Scale section, set the Scale X to be 1.00000
9. In the Custom Size section, expand the Resize page to content... option.
10. Then, click the button Resize page to drawing or selection.
11. (Maybe optional) Click on File > Clean up document...
12. Finally, save the file as Plain SVG.

Upload to FlutterIcon

1. Go to FlutterIcon.
2. Drag and drop the svg file we have saved from Inkscape.
3. Rename class
4. Click on Download
5. Add to project and ready to be used

References:

• https://github.com/fontello/fontello/wiki/How-to-use-custom-images#importing-svg-images