title: How do I change icon dynamically condition based which is being displayed via typescript?
body: <p>I am displaying icons via typescript using material icon's name. I want to change the icon according to the condition.
  Say like in typescript the name of icon is 'power_off',
  <code>if power is false then we want to use 'power_off' but if the power is true then we want to use 'power'</code>.
  I am using another component for such code but it is connected with that component and the name is getting changed in this component but in the view it is not getting changed.
  Please help me out with this.
  Thank you in advance.</p>
  
  <pre><code>{name: 'associateDriver', visible: true, tooltip: 'Associate Driver', icon: 'person', type: 'icon'},
                  {name: 'associateServiceReminder', visible: true, tooltip: 'Service Reminder', icon: 'add_alert', type: 'icon'},
                  {name: 'busStopStatus', visible: false, tooltip: 'Bus Stop Status', icon: 'pin_drop', type: 'icon'},
                  {name: 'delete', visible: false, tooltip: 'Delete', icon: 'delete', type: 'icon'},
                  {name: 'immobilize', visible: true, tooltip: 'Immobilize', icon: 'power_off', type: 'icon'}
  </code></pre>