Any way to assign html elements to variables in Angular?

I'm pivoting a react app to angular. I had a component that would take an input prop and use that to assemble the icon it needed, sometimes using several different elements. The issue I'm running into is that angular is complaining when I try to assign elements to variables in the way I'm accustomed to in React.

React component:

import React from 'react';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import { faShareAlt, faBars, faClipboardCheck, faEnvelope, faExchangeAlt, faUndoAlt, faPlus, faMinus, faQuestion, faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
import { faEdit, faClipboard, faCopy, faClone, faSquare } from '@fortawesome/free-regular-svg-icons';
import { faTwitter, faFacebookF, faRedditAlien, faTumblr, faPinterest, faInstagram } from '@fortawesome/free-brands-svg-icons';

export default class RosterIcon extends React.Component {

  render(){
    let icons = {
      copy: <FontAwesomeIcon icon={faCopy} />,
      reset: <FontAwesomeIcon icon={faUndoAlt} transform='shrink-2' />,
      menu: <FontAwesomeIcon icon={faBars} />,
      question: <span className="fa-layers fa-fw"><FontAwesomeIcon icon={faSquare}/><FontAwesomeIcon icon={faQuestion} transform="shrink-6" /></span>,
      confirm: <span className="fa-layers fa-fw"><FontAwesomeIcon icon={faSquare}/><FontAwesomeIcon icon={faCheck} transform="shrink-6" /></span>,
      cancel: <span className="fa-layers fa-fw"><FontAwesomeIcon icon={faSquare}/><FontAwesomeIcon icon={faTimes} transform="shrink-6" /></span>,
      clone: <span className="fa-layers fa-fw"><FontAwesomeIcon icon={faClone}/><FontAwesomeIcon icon={faPlus} transform="shrink-6 right-1.5 up-1.5" /></span>,
      add: <span className="fa-layers fa-fw"><FontAwesomeIcon icon={faSquare}/><FontAwesomeIcon icon={faPlus} transform="shrink-6" /></span>,
      delete: <span className="fa-layers fa-fw"><FontAwesomeIcon icon={faSquare}/><FontAwesomeIcon icon={faMinus} transform="shrink-6" /></span>,
      switch: <FontAwesomeIcon icon={faExchangeAlt} />,
      share: <FontAwesomeIcon icon={faShareAlt} transform='shrink-2' />,
      edit: <FontAwesomeIcon icon={faEdit} />,
      email: <FontAwesomeIcon icon={faEnvelope} size='xs' />,
      clipboard: <FontAwesomeIcon icon={faClipboard} />,
      clipped: <FontAwesomeIcon icon={faClipboardCheck} />,
    }
    return(
      icons[this.props.icon]
    );

  }

}

Angular component (so far):

import { Component, Input, OnInit } from '@angular/core';

import { faShareAlt, faBars, faClipboardCheck, faEnvelope, faExchangeAlt, faUndoAlt, faPlus, faMinus, faQuestion, faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
import { faEdit, faClipboard, faCopy, faClone, faSquare } from '@fortawesome/free-regular-svg-icons';
import { faTwitter, faFacebookF, faRedditAlien, faTumblr, faPinterest, faInstagram } from '@fortawesome/free-brands-svg-icons';

@Component({
  selector: 'app-rostericon',
  template: `<fa-icon [icon]="icons[icon]"></fa-icon>`,
  styleUrls: ['./rostericon.component.scss']
})
export class RostericonComponent implements OnInit {
  @Input() icon:string;
  icons;
  constructor() { }

  ngOnInit(): void {
    this.icons = {
      copy: faCopy,
    }
  }

}

I'm wondering if it's possible to mimic the functionality of the react component, where I define the element(s) to be held in the variable object, and then easily render that as the template. (Also would love to be able to render the component(s) without [innerHTML] on a superfluous element)

Edit: The solution (thanks @The James. I can even use the default case statement to handle icons from the other font I plan to use):

import { Component, Input, OnInit } from '@angular/core';

import { faShareAlt, faBars, faClipboardCheck, faExchangeAlt, faUndoAlt, faPlus, faMinus, faQuestion, faTimes, faCheck } from '@fortawesome/free-solid-svg-icons';
import { faEdit, faClipboard, faCopy, faClone, faSquare } from '@fortawesome/free-regular-svg-icons';
import { faTwitter, faFacebookF, faRedditAlien, faTumblr, faPinterest, faInstagram } from '@fortawesome/free-brands-svg-icons';

@Component({
  selector: 'app-rostericon',
  template: `
  <fa-icon *ngIf="iconData?.length === 1" [icon]="iconData[0].icon" [transform]="iconData[0].transform"></fa-icon>
  <span *ngIf="iconData?.length > 1" class="fa-layers fa-fw">
    <fa-icon *ngFor="let icon of iconData" [icon]="icon.icon" [transform]="icon.transform"></fa-icon>
  </span>
`,
  styleUrls: ['./rostericon.component.scss']
})
export class RostericonComponent implements OnInit {
  @Input() icon:string;
  iconData:Array<Object>;
  constructor() { }

  ngOnInit(): void {
    switch (this.icon) {
      case "copy":
          this.iconData = [
            {
              icon: faCopy,
              transform: '',
            },
          ]
          break;
      case "question":
          this.iconData = [
            {
              icon: faSquare,
              transform: '',
            },
            {
              icon: faQuestion,
              transform: 'shrink-6',
            },
          ]
          break;
      default:
        break;
    }
  }
}