title: How to create multiple icons in Azure Maps symbol layer with same primary color but different secondary color using createFromTemplate function?
body: <p>I'm having a Crafts array containing unique elements. (For ex [&quot;Welder&quot;,&quot;Fitter&quot;,&quot;Painter&quot;]).
  The data source contains an array of people containing uniqueId, craft and a property active being true or false. I have created two datasources one for active and another for inactive people. I have created custom icon from createFromTemplate method as below</p>
  <pre><code>let imageTemplates = [];
  let inactiveImageTemplates = [];
  let iconNamesActive = [];
  let iconNamesInactive = [];
  crafts.forEach((i) =&gt; {
    let iconNameActive = i + '_Active_' + 'Icon';
    let iconNameInactive = i + '_Inactive_' + 'Icon';
    iconNamesActive.push(i, iconNameActive);
    iconNamesInactive.push(i, iconNameInactive);
    let rColor = randomColor().hexString();
    imageTemplates.push(this.map.imageSprite.createFromTemplate(iconNameActive, 'marker-flat', rColor, '#00FF00')); //!Turn it to green
    inactiveImageTemplates.push(this.map.imageSprite.createFromTemplate(iconNameInactive, 'marker-flat', rColor, '#FF0000')); //!Turn it to red
  });
  
  
  Promise.all(imageTemplates).then(() =&gt; {
    console.log(imageTemplates);
  
    this.map.layers.add(
      new atlas.layer.SymbolLayer(this.beaconActiveDataSource, 'craftActiveLayer', {
        filter: ['!', ['has', 'point_count']],
  
        iconOptions: {
          image: [
            'match',
            ['get', 'role'],
            ...iconNamesActive,
            'marker-blue'
          ]
        }
      })
    );
  });
  Promise.all(inactiveImageTemplates).then(() =&gt; {
    this.map.layers.add(
      new atlas.layer.SymbolLayer(this.beaconInactiveDataSource, 'craftInactiveLayer', {
        filter: ['!', ['has', 'point_count']],
        iconOptions: {
          image: [
            'match',
            ['get', 'role'],
            ...iconNamesInactive,
            'marker-blue'
          ]
        }
      })
    );
  });
  </code></pre>
  <p>However I'm getting a lot of console.log errors saying icon name already exists. And while zooming out the inactive icon is rendering over my Bubble layer that I already have in the map. I have concatenated &quot;_active&quot; and &quot;<em>inactive</em>&quot; to the icon names while creating the icon image templates for each craft to make it unique. What is the best way to create icon names/icons especially for the same entity but differentiate with secondary colors ? Thanks for your time.</p>