Custom SVG-Font Icon not centered in Icon Widget

Question

I am using the material design icons for floating action buttons. Now I wanted to use a custom icon. From a SVG file I generated a font with the Flutter-Icon-Generator (http://fluttericon.com/). Everything worked out nicely but the icon is not centered.

Here the minimized screenshot, the €-Icon is centered, the other one (custom one) is not:

The corresponding code of the FloatingActionButton's is:

  Widget money() {
    return Container(
      child: FloatingActionButton(
        backgroundColor: widget.openColor,
        elevation: 0,
        heroTag: "btn_money",
        onPressed: () {
          widget.onPressed(DashboardFabAction.AddMoney);
          animate();
        },
        tooltip: 'Money',
        child: Icon(Icons.euro_symbol, color: widget.iconColorOpen,),
      ),
    );
  }

  Widget eggs() {
    return Container(
      child: FloatingActionButton(
        backgroundColor: widget.openColor,
        elevation: 0,
        heroTag: "btn_eggs",
        onPressed: () {
          widget.onPressed(DashboardFabAction.AddEggs);
          animate();
        },
        tooltip: 'Eggs',
        child: Icon(CustomIcons.egg, color: widget.iconColorOpen,),
      ),
    );
  }

The CustomIcons' code is:

import 'package:flutter/widgets.dart';

class CustomIcons {
  CustomIcons._();

  static const _kFontFam = 'CustomIcons';

  static const IconData egg = const IconData(0xe800, fontFamily: _kFontFam);
}

The pubspec.yaml is not interesting here since i get the correct icon there.

Thanks in advance for your answers!

Answer 1

I've found an answer to this. The problem was that the height of the svg-path was greater than the width. I tried some 'hacks' with inkscape to add another invisible path to the svg with the width equals height, but it didn't work out.

In the end I opened the font (.ttf) with FontForge (open source), centered the icon, saved the font again and it worked.

Here are the steps, it may saves someones time:

1. Open the font in FontForge
2. Click on "View - Goto" and enter the icon address (In my case it was 0xe800)
3. Double click on your icon to open the editor
4. Metrics - Center in width
5. Close editor
6. File - Generate Fonts
7. Enter your desired name and choose TrueType for the font format
8. Click Generate
9. Some dialogs will appear with warnings and the offer to fix some stuff - just click yes or review all the time
10. If a window pops up with your icon name - double click it and some fix the problems with the upcoming popups
11. Done - Don't forget flutter clean before using the new font