I found the answer to my question. This solution assumes you use icomoon.io and SVG icons.

1. Prepare your SVG icons and go to icomoon.
2. Upload your svg icons. icomoon helps to map them to a unicode character.
3. Click "Download" below "Font" on the bottom right. You should see a zip file containing the files icomoon.{woff|svg|ttf|eot}. You should also see a demo.html file.

Now you have the font ready.

1. Create a CSS file with the following code. Replace "my-font" if you don't like the name.

@font-face {
    font-family: 'my-font';
    font-display: block;
    src: url('./icomoon.eot')  format('embedded-opentype'), url('./icomoon.woff') format('woff'), url('./icomoon.svg') format('svg'), url('./icomoon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.pi {
    font-family: 'my-font';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.pi-icon-name::before {
    content: "<the respective unicode character>"
}

In pi-icon-name, replace <the respective unicode character> with the unicode you see on demo.html. If the unicode is e900, enter \e900. Refer to the picture below for more info.

2. Make sure you import the css file in your main styles.css

You'll then be able to use the same API like below: my.component.ts

this.messageService.add({
      severity: 'success',
      detail: 'Message Content',
      icon: 'pi pi-icon-name',
      sticky: true,
});

Caveat

If you want to extend instead of replace primeicons, use your own CSS class naming system. I.e. don't name it .pi, .pi-*, because it clashes with primeicon's classes etc

Icomoon alternatives

• fantasticon