How to add increase /configure weight/boldness (FontWeight) of an Icon in Flutter

Question

I have an Icon (Back Icon to be Specific) in My Flutter App. It Looks Lighter. I Want to Make It Bold/Increase weight for Some Reason.

Container(
    child: Icon(
        Icons.arrow_back,
        color: Color(0xffffffff),
    ),
    padding: EdgeInsets.all(10.0),
    margin: EdgeInsets.fromLTRB(0, 10.0, 0, 0.0),
    decoration: BoxDecoration(
        color: Color(0xff03b673),
        borderRadius: BorderRadius.all(Radius.circular(100.0)),
    ),
)

Can't Find Any Thread/Documentation Regarding it.

Knitwear

Answer 1

icon size

Container(
child: Icon(
    Icons.arrow_back,
    color: Color(0xffffffff),
    size: 24.0
 ),
 padding: EdgeInsets.all(10.0),
 margin: EdgeInsets.fromLTRB(0, 10.0, 0, 0.0),
 decoration: BoxDecoration(
    color: Color(0xff03b673),
    borderRadius: BorderRadius.all(Radius.circular(100.0)),
 ),
)

At the moment,I think there is no fontWeight property on icons. you may import custom icon from fluttericon.com and when you import it under fonts you can set the font weight like this in pubspec.yaml:

flutter:
 fonts:
 - family: MyIcon
  fonts:
    - asset: lib/fonts/iconfont.ttf
      weight: 400

For complete steps follow this nice article: https://developpaper.com/flutter-taste-1-3-step-use-custom-icon/

Whitt

But Size and Weight are Two Differen't Things. Isn't it? – Knitwear

thats right, two different things, at the moment i guess there is no built in property, you may set up your own custom icon from official fluttericon.com and set the font weight to the entire family, see my updated answer above – Whitt

Yeah, Importing New Font Did it. I am Using FontAwesome Now :) – Knitwear

Answer 2

Question is old, but I hope it will help someone.

Before:

Icon(
  CupertinoIcons.exclamationmark_circle,
  color: Colors.red,
  size: 16.0,
)

After (with FontWeight):

Text(
  String.fromCharCode(CupertinoIcons.exclamationmark_circle.codePoint),
  style: TextStyle(
    inherit: false,
    color: Colors.red,
    fontSize: 16.0,
    fontWeight: FontWeight.w700,
    fontFamily: CupertinoIcons.exclamationmark_circle.fontFamily,
    package: CupertinoIcons.exclamationmark_circle.fontPackage,
  ),
)

Of course, your icons should support different weights. Icon from my example supports only 2 weights:

1. thin <= FontWeight.w500
2. thick >= FontWeight.w600

Nope

Thank you for this. I improved an icon's appearance thanks to you. Would be so great if we could freely change to all weights for all icons. Do you know of any resource to find icons/icon packs that have multiple weights? – Lint

Answer 3

If you mean you want to change the weight of the icon

Starting from Flutter 3.10.0 and above versions:

Material design 3 is implemented in Flutter so that you can specify the weight of the icon easily like this example:

Icon(Icons.star_outline,weight: 10)

Keirakeiser

In Flutter 3.13.2 changing the weight does not change the icon stroke thickness. – Ceylon

Answer 4

Setting the weight (stroke thickness) requires the underlying icon font to support the wght FontVariation axis. I've found that none of the icons provided by default support this property. Therefore, setting the weight property does nothing for such icons.

The icons in the material_symbols_icons package support the weight property. For example:

import 'package:material_symbols_icons/symbols.dart';
...
          Icon(Symbols.chevron_right, weight: 100)

Ceylon

Answer 5

You can do it by specifying icon size.

Container(
    child: Icon(
        Icons.arrow_back,
        size: 20.0,
        color: Color(0xffffffff),
    ),
    padding: EdgeInsets.all(10.0),
    margin: EdgeInsets.fromLTRB(0, 10.0, 0, 0.0),
    decoration: BoxDecoration(
        color: Color(0xff03b673),
        borderRadius: BorderRadius.all(Radius.circular(100.0)),
    ),
)

Spaceband

But Size and Weight are Two Differen't Things. Isn't it? – Knitwear