title: How can i use an ngSwitch to change color of icon inside an ngIf
body: <p>I have a template which I am using inside a Cell to display an icon as well as a tooltip.
  I currently only display an icon if there is a value which is in my case the listingCount is &gt; 0. All that works as expected but I want to be able to change the color of the image which is currently green to others like red, yellow etc based on the value in the</p>
  <p>Here is what my template code looks like right now</p>
  <pre><code>&lt;ng-template #mlsCell let-row&gt;
      &lt;igx-icon [igxTooltipTarget]=&quot;tooltipRef&quot; (click)=&quot;showMlsInfo(row)&quot; *ngIf=&quot;row?.listingCount &gt; 0&quot; color=&quot;green&quot; [igxTooltipTarget]=&quot;locationTooltip&quot;&gt;difference&lt;/igx-icon&gt;
      
  &lt;div class=&quot;locationTooltip&quot; #locationTooltip=&quot;tooltip&quot; igxTooltip&gt;
      &lt;div class=&quot;locationTooltipContent&quot;&gt;
          &lt;div&gt;
              &lt;div&gt;BA : {{row?.lisiting?.BuyerAgentFirstName}} {{row?.lisiting?.BuyerAgentLastName}}&lt;/div&gt;
              &lt;div&gt;BO : {{row?.lisiting?.BuyerOfficeName}}&lt;/div&gt;
              &lt;div&gt;LA : {{row?.lisiting?.ListAgentFirstName}} {{row?.lisiting?.ListAgentLastName}}&lt;/div&gt;
              &lt;div&gt;LO : {{row?.lisiting?.ListOfficeName}}&lt;/div&gt;
              &lt;div&gt;DOM : {{row?.lisiting?.DaysOnMarket}}&lt;/div&gt;
              &lt;div&gt;OMD : {{row?.lisiting?.OnMarketDate}}&lt;/div&gt;
              &lt;div&gt;CD : {{row?.lisiting?.CloseDate}}&lt;/div&gt;
              &lt;div&gt;LP : {{row?.lisiting?.ListPrice}}&lt;/div&gt;
              &lt;div&gt;CP : {{row?.lisiting?.ClosePrice}}&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/ng-template&gt;
  </code></pre>
  <p>I get it working but not sure if the below is the best approach to deal with cases like this where you have one main condition and then want to change colors or other things based on a value.</p>
  <pre><code>&lt;igx-icon [igxTooltipTarget]=&quot;tooltipRef&quot; (click)=&quot;showMlsInfo(row)&quot; *ngIf=&quot;row?.listingCount &gt; 0  || row?.StandardStatus =='Closed'&quot; 
              color=&quot;red&quot; 
              [igxTooltipTarget]=&quot;locationTooltip&quot;&gt;difference&lt;/igx-icon&gt;
  &lt;igx-icon [igxTooltipTarget]=&quot;tooltipRef&quot; (click)=&quot;showMlsInfo(row)&quot; *ngIf=&quot;row?.listingCount &gt; 0  || row?.StandardStatus =='Active'&quot; 
              color=&quot;green&quot; 
              [igxTooltipTarget]=&quot;locationTooltip&quot;&gt;difference&lt;/igx-icon&gt;
  &lt;igx-icon [igxTooltipTarget]=&quot;tooltipRef&quot; (click)=&quot;showMlsInfo(row)&quot; *ngIf=&quot;row?.listingCount &gt; 0  || row?.StandardStatus =='Pending'&quot; 
              color=&quot;yellow&quot; 
              [igxTooltipTarget]=&quot;locationTooltip&quot;&gt;difference&lt;/igx-icon&gt;
  </code></pre>