CODEWITHSUNDEEP
flutterflutter-layout
Leonard Arnold
Leonard Arnold

Reputation: 664

Custom SVG-Font Icon not centered in Icon Widget

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:

enter image description here

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!

Upvotes: 1

Views: 1771

Answers (2)

Nikola Savic
Nikola Savic

Reputation: 1

I found that ensuring the SVG file has equal dimensions (i.e., width and height) and that the illustration is centered helped when generating icons using FlutterIcons. This step ensured that the icons were centered properly in Flutter.

Upvotes: 0

Leonard Arnold
Leonard Arnold

Reputation: 664

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

Upvotes: 5

Related Questions