How to remove extra space from icons

Question

Icon(ABC) has space at the top:

Do icons have spaces by default?
Is there a way to remove spaces?

Code:

import 'package:flutter/material.dart';

void main() {
  runApp(const _MyApp());
}

class _MyApp extends StatelessWidget {
  const _MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Text(
              "Demo1",
            ),
            Icon(
              Icons.abc,
              color: Colors.grey,
              size: 50,
            ),
            Text(
              "Demo2",
            ),
          ],
        ),
      ),
    );
  }
}

crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, — bakboem, Jan 10 '23 at 02:12
The icon you are using have more spacing vertical than horizontal, so it is the space of that particular icon, not icon widgets itself (although icon do have some padding by default). You can change to another icon to see the effect. — Loc, Jan 10 '23 at 02:16
Does this answer your question? [How do I remove Flutter IconButton big padding?](https://stackoverflow.com/questions/50381157/how-do-i-remove-flutter-iconbutton-big-padding) — Stanly, Jan 10 '23 at 02:50
@Stanly This question is not an IconButton, it is a Icon. I would like an answer with a Icon. — shingo.nakanishi, Jan 10 '23 at 02:53

score 1 · Answer 1 · answered Jan 10 '23 at 02:13

Set Row alignment to center

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Text(
              "Demo1",
            ),
            Icon(
              Icons.abc,
              color: Colors.grey,
              size: 50,
            ),
            Text(
              "Demo2",
            ),
          ],
        ),
      ),
    );
  }
}

score 0 · Answer 2 · answered Jan 10 '23 at 02:30

You added explicitly more size to icon widget and your row CrossAxisAlignment is start you can need reduce icon size & set CrossAxisAlignment: CrossAxisAlignment.center

Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: const [
      Text("Demo1"),
      Icon(
        Icons.abc,
        color: Colors.grey,
        size: 50,
        //size: 35,
      ),
      Text("Demo2"),
    ],
)

How to remove extra space from icons

2 Answers2