stretchX and stretchY causes sdf icons to be deformed

Nobody has claimed this yet.

**mapbox-gl-js version**: 1.12.0

**browser**: Chrome 85

### Steps to Trigger Behavior

1. Add an sdf image with `stretchX` or `stretchY`
2. Add a symbol layer using the sdf image as an icon

### Link to Demonstration

[https://jsfiddle.net/px6vkwm2/](https://jsfiddle.net/px6vkwm2/)

### Expected Behavior

I'd like to use `icon-color` to dynamically change the color of an icon image. This requires the icon image to be `sdf: true`. I'd also like to set stretchable areas of the icon image so it gracefully scales around the symbol text.

Below is a sample of what I'm trying to achieve. This was not done in Mapbox GL JS but it seems like all the features are here. I was hoping I could combine `icon-color`, `stretchX`, `stretchY`, `icon-text-fit`, and `icon-anchor` to allow dynamic text and color for point labels all using the same `icon-image`. Unfortunately I've ran into this issue with sdf and stretchable areas and #10025.


### Actual Behavior

The icon image is deformed

Start by reproducing the deformation in the linked JSFiddle using an SDF image with stretchX or stretchY in a symbol layer. Compare the behavior with and without SDF while combining icon-color, icon-text-fit, and icon-anchor; done means stretchable SDF icons scale without deformation and retain dynamic coloring.

Written by the indexing model from the issue text.