We need to use FontAwesome Pro SVG’s (and other SVG icons). However, some of the UI elements are constructed in the code, rather than the template. Our developers tell me that it isn’t possible to use the SVG’s when we build like this and have to therefore rely on the font/css approach to using FontAwesome via class names. I understand we can use the SVG’s inline and via template tags.

Here is the setup we’re using:

  <p-menu
    #menuElement
    [model]="items"
    [popup]="true"
    appendTo="body"
  >
  </p-menu>

  protected items: MenuItem[] = [
    {
      id: 'ui-session-item-menu-rename',
      label: this.i18nClient.translate(
        'action | session action | rename',
        'Rename',
      ),
      icon: 'fa-solid fa-file-pen',
      command: () => {
        this.editing.set(true)
      },
    },
    {
      id: 'ui-session-item-menu-delete',
      label: this.i18nClient.translate(
        'action | session action | delete',
        'Delete',
      ),
      icon: 'fa-solid fa-trash',
      command: () => {
        this.openDeleteConfirmationModal()
      },
    },
  ]

We’ve made use of the template tags and inline HTML to construct some of our UI’s but would like to be able to leverage more code-orientated design.