CODEWITHSUNDEEP
flutter
mirkancal
mirkancal

Reputation: 5345

How to use same size for Material Icons and Font Awesome Icons in Flutter?

I'm using Material Icons and Font Awesome Icons in my app, trying to make them same size. I don't know if Material Icons have padding, but they don't seem to have same size to me.

Relevant issues and SO posts about it:

screenshot

I'm using Icons.directions_run and FontAwesomeIcons.mountain with my custom widget(I needed a circular background for them, open for suggestions), but I couldn't make them same size.

Here's how they look in Debug Painting:

screenshot with debug painting on

Also I've removed size from Icon and use another Container to resize icon. Here's the code for that:

class ChallengeDetailIcon extends StatelessWidget {
  const ChallengeDetailIcon({@required this.iconData});

  final IconData iconData;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 24,
      height: 24,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: blueColor,
      ),
      child: Container(
        width: 15,
        height: 15,
        child: Icon(
          iconData,
          color: Colors.white,
        ),
      ),
    );
  }
}

But it didn't work.

screenshot for second code snippet

EDIT: Tried FaIcon

Code: 

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 24,
      height: 24,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: blueColor,
      ),
      child: Center(
        child: FaIcon(
          iconData,
          size: 12,
          color: Colors.white,
        ),
      ),
    );
  }
}

After FaIcon

With size 15 FaIcon with size 15

Upvotes: 1

Views: 4778

Answers (1)

Marcel Dz
Marcel Dz

Reputation: 2714

notice about this: [...] Why aren't the icons aligned properly or why are the icons being cut off? # Please use the FaIcon widget provided by the library instead of the Icon widget provided by Flutter. The Icon widget assumes all icons are square, but many Font Awesome Icons are not. [...]

https://pub.dev/packages/font_awesome_flutter

try to use FaIcon instead of Icon for fontawesome

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class MyWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return IconButton(
      // Use the FaIcon Widget + FontAwesomeIcons class for the IconData
      icon: FaIcon(FontAwesomeIcons.gamepad), 
      onPressed: () { print("Pressed"); }
     );
  }
}

EDIT:

A second solution for this could be controlling it with iconTheme:

theme: ThemeData.light().copyWith(
        iconTheme: IconThemeData(size: 36.0, color: Colors.black87),
...

https://api.flutter.dev/flutter/widgets/IconTheme-class.html

Upvotes: 1

Related Questions