title: dynamic icon/symbol coloring with mapbox
body: <p>I am working with mapbox gl js for the first time.  I need to be able to define a 'template' icon/symbol (lets say a triangle that is approx 16X16) and then use that icon/symbol on a layer but be able to use the icon-color property in the 'paint' section to be able to set the color for the icon/symbol in the style.</p>
  
  <p>I have created a triangle <code>svg</code> file.  I then used a cli utility to convert that svg to an sdf (I named it <code>triangle16_sdf.png</code>) and uploaded it to my aws public bucket. The <code>sdf</code> is monochromatic. I am trying to use that in a style as defined int the below style snippet:</p>
  
  <pre><code>{"type":"symbol","icons":{"triangle-16":"https://my_aws_url/icons/triangle16_sdf.png"},"paint":{"icon-color":"#00ff00"},"layout":{"symbol-placement":"point","icon-image":"triangle-16","icon-ignore-placement":true,"icon-allow-overlap":true}}
  </code></pre>
  
  <p>This shows the icon but only the template. It does not color the icon with the appropriate color.</p>
  
  <p>Is there something I am doing incorrectly here or is there another approach where I can have a single icon/symbol that I can color differently with a style?</p>