how to use vector-icons?

[enersis-pst]

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:

<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:m="https://www.mapbox.com">
	<m:metadata>
		<m:parameters>
			<m:parameter m:type="color" m:name="flag_color" m:value="#000000"/>
			<m:parameter m:type="color" m:name="boundary_color" m:value="#000000"/>
		</m:parameters>
	</m:metadata>
	<path d="M10.1418 27.3334L10.1417 ... 13.9994Z" fill="flag_color"/>
	<path d="M11.1418 27.3334L10.1417 ... 13.9994Z" fill="boundary_color"/>
</svg>

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.