Icons not truly centered on web

[Trulsmatias]

As with you I used https://github.com/NikSWE/flutter_brand_icons but ran in to the issue with null safety. Fortunately I came over your comment on an issue on that repo that led me to this repo NikSWE/flutter_brand_icons#1 (comment). So I know you took inspiration from that repo. Unfortunately this repo is not centering the icons as the other repo did. This is not a breaking issue, but annoying.

flutter_brand_icons:

this repo:

[jlnrrg]

Both libraries just export IconData, so I highly doubt that this is an issue with the package.
If you'd like to provide an minimal example of the error you encounter, I will be more than happy to take a look 😄

[Trulsmatias]

Thanks for the fast reply. I have had a lot on my plate lately and haven't had the chance to look into this before now. After doing some testing it looks like this only is a problem on web (which is where I am using the package). Here is a minimal example:

import 'package:flutter/material.dart';
import 'package:flutter_brand_icons/flutter_brand_icons.dart';
import 'package:simple_icons/simple_icons.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Icon Demo"),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                InkedIconButton(
                  icon: BrandIcons.apple,
                ),
                SizedBox(
                  width: 1,
                ),
                InkedIconButton(
                  icon: SimpleIcons.apple,
                ),
              ],
            ),
            SizedBox(
              height: 10,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                InkedIconButton(
                  icon: BrandIcons.googleplay,
                ),
                SizedBox(
                  width: 1,
                ),
                InkedIconButton(
                  icon: SimpleIcons.googleplay,
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

class InkedIconButton extends StatelessWidget {
  final IconData icon;

  const InkedIconButton({Key key, this.icon}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Ink(
      decoration: ShapeDecoration(
        color: Colors.black,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(10))),
      ),
      child: IconButton(
        iconSize: 35,
        icon: Icon(
          icon,
          color: Colors.white,
        ),
        onPressed: () {},
      ),
    );
  }
}

[jlnrrg]

Thanks for limiting the issue to flutter web.
Because the library just exports IconData and it does not differenciate between web or app, the only explanation I can think if is that there is an issue directly with the flutter web framework.
But I agree, that is is weird that such a problem did not occur with the brand_icon.
Maybe @NikSWE (author of brand_icons) has an idea.

[Trulsmatias]

Let's hope he answers :)

[jmarkham]

It's the font file. Had the same issue with flutter web and html renderer. Issue doesn't appear with canvaskit. To validate it's something with the ttf file, I can download the SVGs I want from simpleicons.org, upload them to fluttericon.com, download the result, and use them as-is with the rendering as expected in both html and canvaskit rendering.

[NikSWE]

It's the font file

I agree with @jmarkham's explanation, also @jlnrrg how are you converting the svg from simpleicons to ttf file? (I've used icomoon to convert the svg's set to ttf file, manual process)

[NikSWE]

@Trulsmatias apart from the two icons mentioned which other icons are showing such difference ?

[NikSWE]

if we could use svg instead of ttf on flutter web that would be great, would suggest @jlnrrg to ask this on the flutter repo for better guidance.

[jlnrrg]

@NikSWE I only grab the ttf file from simpleicons directly (I have no idea how they build it)
with the ttf file I run ttx -t cmap SimpleIcons.ttf to get ttx file where I can grab the code from. (it is basicaly xml)

[NikSWE]

@jlnrrg when I started my project they didn't even have a system to build the ttf file (if i remember correctly they were only building woff and woff2 font files)

[NikSWE]

can't we create a sample flutter project for web that showcases all the icons? something like this

[NikSWE]

this way people can quickly get the name of the icon (specified in dart code)

[jlnrrg]

I think they added it later github issue

I don't really see the benefit of it in regards to the effort, as people can just use that page or look in the documentation.
But if you want to build it, feel free to do so, and make a PR or publish it in a seperate repo, where we can link to then.