Repository: flutter
Issue: Better support for variable fonts as animated icons
Labels: a: text input,c: new feature,framework,a: animation,f: material design,c: proposal,P3,team-design,triaged-design

### Use case

Currently one just can implement animated (monochrome/colored) icons by variable fonts using something like,

1. Download https://github.com/Typogram/Anicons/raw/master/webfonts/AniconsColorGX.ttf and add it to `fonts/AniconsColorGX.ttf` in your project.
2. Add the following in your `pubspec.yaml`
```
    - family: AniconsColorGX
      fonts:
        - asset: fonts/AniconsColorGX.ttf
```
4. Use the following code,

```dart
Text(
  'G',
  style: TextStyle(
    fontFamily: 'AniconsColorGX',
    fontSize: 30,
    fontVariations: [
      FontVariation('TIME', _controller.value * 99 + 1)
    ],
  ),
)
```

<details>
<summary>The complete code which has animation controller part also</summary>

```dart
class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this, // the SingleTickerProviderStateMixin
      duration: const Duration(seconds: 2),
    );
    _controller.repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Variable Font Animation Demo'),
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (_, __) => Text(
            'G',
            style: TextStyle(
              fontFamily: 'AniconsColorGX',
              fontSize: 30,
              fontVariations: [FontVariation('TIME', _controller.value * 99 + 1)],
            ),
          ),
        ),
      ),
    );
  }
}
```
</details>

which is good enough but the API is too different from when we only needed the static version,

```
Icon(
  IconData(
    'G'.codeUnitAt(0),
    fontFamily: 'AniconsColorGX',
  )
)
```

### Proposal

I'd suggest addition of variation settings to `IconData` so one could also write something like

```dart
Icon(
  IconData(
    'G'.codeUnitAt(0),
    fontFamily: 'AniconsColorGX',
    // The following field, fontVariations, currently doesn't exist
    fontVariations: [FontVariation('TIME', _controller.value * 99 + 1)],
  )
)
```

And maybe in future AnimatedIcon can be adopted with this to make creation of custom third party animated icons possible which [currently isn't](https://github.com/flutter/flutter/blob/1b18b1327a590ad295ad53bb758ce0eac006e577/packages/flutter/lib/src/material/animated_icons/animated_icons.dart#L102). We already use fonts for icons so variable fonts for animated seems like natural expansion of what already practiced in flutter ecosystem say as for example the tree shaking infrastructure of animated variable fonts is the same as static fonts and already exists in harfbuzz-subset which is currently is in use flutter.

Variable fonts already can be used for monochrome and colored animations using above snippet but the even more advanced form of color fonts that supports gradients and so is tracked at https://github.com/flutter/flutter/issues/134897 which is a separate issue from this.

See the online demo of animated color using current APIs and with third party libraries,

* https://ebraminio.github.io/flutter_variable_font_animation_demo/build-web-html/
  which uses `--web-renderer html`
* https://ebraminio.github.io/flutter_variable_font_animation_demo/build-web-canvaskit/
  which uses `--web-renderer canvaskit`

It's code exists here https://github.com/ebraminio/flutter_variable_font_animation_demo

See https://simoncozens.github.io/colrv1-rocks/ also for a better context.

Thanks!