Implement dual tone

[CodeDoctorDE]

This type of icons looks very good.

This weight is not yet supported

Is currently written on the website.

[rektdeckard]

Flutter's Icon class is a wrapper around a font glyph, and fonts don't support multiple colors or intrinsic opacity, making it impossible to render anything with multiple colors or tones (in the general sense) as an Icon.

While there are other possible approaches, using using flutter_svg package or Skia directly to render vector images like our duotone icons, they simply aren't idiomatic Flutter, and would break the ability to use them in places where an Icon is expected, e.g. IconButton.

We definitely want to bring duotone to the Flutter package eventually, but it simply requires a bit more thinking and effort. If you need duotone icons in a context that doesn't require a Flutter Icon, I would recommend sourcing the assets you need from our website and relying on flutter_svg to render them in your app.

Disclaimer: I'm not really a Flutter guy, so if anyone with experience or ideas on a better approach wants to jump in with a PR, I'm all ears!

cc @rurickdev

[CodeDoctorDE]

Thanks, IconButton supports normal Widgets so SVG can work https://api.flutter.dev/flutter/material/IconButton/icon.html

[johnnyasantoss]

@rektdeckard what if you had the icon split in two fonts (eg. address-book-duotone-bg & address-book-duotone-fg)? and then with a special DuoTone class it could have both icons stacked on top of each other looking just like layers on photoshop, rendering it perfectly (and with the benefit of being tree-shakable)

[johnnyasantoss]

I've created a PoC for this idea. Check it out: https://github.com/johnnyasantoss/flutter_duotone_icon_poc

Worked pretty well

[rektdeckard]

Duotone support is added in v2.0.0.