Override default primeNG icons without creating custom components

Question

I have the following code below. What I want to do is to change the icons that appear, while retaining the same API (the icon: 'pi pi-check-circle', argument). In other words, I want zero edits to the code below and a different icon to appear on screen.

Is this possible? Please show me how to do it.

my.component.html

 <p-toast position="top-left" class="p-toast-position"/>

my.component.ts

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

I looked here for solutions but all involve customising my own components or inserting my own templates, but those are intrusive and adopting them means I need to more code just to use a different icon.

Answer 1

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