how to use vector-icons?

Nobody has claimed this yet.

Im interested into the experimental vector-icons which are described here https://docs.mapbox.com/mapbox-gl-js/example/custom-colorized-vector-icons/.

Like it is described in the example, the color `flag_color` is defined in the `m:metadata` which is in the root of the svg and not used inside some elements. So the color can only be used for the whole svg and not partial?
If we are working with svg why not useing multiple variables for some svg elements and not only for the whole svg?

example:
```

```

We are using `symbol` layer with images on `icon` and on `text-field` to style it as flexible as possible. The problem is the overlapping of the text-images because they are rendered after icon. So i hope we can replace this by this vector-icons to solve it.
For now only color is supported like i understood, but maybe also other styling-attributes like showing some dynamic text or show/hide elements would also be nice.

Start with the linked custom-colorized vector-icons example and the SVG’s m:metadata parameters, then compare the requested per-element colors with the current symbol-layer icon and text-field usage. Done would clarify or support multiple color parameters within one SVG, including the scope of any additional dynamic styling requested.

Written by the indexing model from the issue text.