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!
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:
flutter clean
before using the new font