Dynamic Icons for Call Channel in Twilio Flex

Here's how to make Call task channel icons dynamic in Twilio Flex 2.

Most New Channels

This method usually works for new channels. We make a new task channel. We define which tasks belong to it. We can define the icons that show up for that channel. Here it is:

const channel = flex.DefaultTaskChannels.createDefaultTaskChannel(
  'New Call Channel',
  (task) => task.attributes.somethingSpecial,
  <NewCallIcon />,
  <NewCallIcon />
);

flex.TaskChannels.register(channel);

But this doesn't work for the Call channel. If you try to define a new channel that matches call/voice tasks, it'll match, it'll look right, the task will be served, but the outbound call won't be initialized and will silently fail.

Special Call Channel

But for the Call channels (task channel unique name "voice" by default), this is the method that will allow you to change the icon of the existing channel (not making another one). It looks great, and the outbound call still works:

function getCallOutIcon(task) {
  return task.attributes.special1 ? (
    <Special1Icon />
  ) : (
    <Special2Icon />
  );
}

flex.DefaultTaskChannels.Call.icons.main = getCallOutIcon;
flex.DefaultTaskChannels.Call.icons.list = getCallOutIcon;
flex.DefaultTaskChannels.Call.icons.active = getCallOutIcon;

Any better way to do this?