CODEWITHSUNDEEP
cssangularprimengp-tableprimeicons
Steve
Steve

Reputation: 14912

How to replace table header sort icons in PrimeNG 15.4+

In the latest release of PrimeNG the way sort icons are done has changed. They used to just have an i tag with CSS classes, which I was able to override in my CSS to use my company's icons:

enter image description here

but now they are using a template with an SVG:

enter image description here

I saw on their release notes how I can override an icon such as a drop-arrow in a menu: https://primeng.org/customicons

But in the case of the p-sorticon there are 3 different icons that could be shown depending on the sort state of the column. So how do I use the new template method for table sort icon replacement? I do not see any documentation.

Upvotes: 5

Views: 6095

Answers (4)

paulight
paulight

Reputation: 1

Thank Sriman Pathy, this global css works by adding it into style.css or my custom-theme.css:

:root {
    sortalticon {
        display: none;
    }

    sortamountupalticon::before {
        content: "\2193";
    }

    sortamountdownicon::before {
        content: "\2191";
    }

    sortamountupalticon,
    sortamountdownicon {
        svg {
            display: none;
        }
    }

    sortamountupalticon::before,
    sortamountdownicon::before {
        font-size: 1rem;
        margin-top: -10px;
        margin-left: 0;
        color: var(--blue3);
        margin-left: .3em;
        font-weight: 300;
    }
}

I also found that using it inside the component directly can be done using :host ::ng-deep

:host {
::ng-deep {
    sortalticon {
        display: none;
    }

    sortamountupalticon::before {
        content: "\2193";
    }

    sortamountdownicon::before {
        content: "\2191";
    }

    sortamountupalticon,
    sortamountdownicon {
        svg {
            display: none;
        }
    }

    sortamountupalticon::before,
    sortamountdownicon::before {
        font-size: 1rem;
        margin-top: -10px;
        margin-left: 0;
        color: var(--blue3);
        margin-left: .3em;
        font-weight: 300;
    }
  }
}

And then in HTML:

<p-sortIcon field="field_name_here"><p-sortIcon>

Upvotes: 0

xanh
xanh

Reputation: 17

First you select the html element instead of the icon and then you need to edit the content url a bit different.

I get a svg from fontawesome

... some svg file from fontawesome

then I need to encode it on a website like this. https://yoksel.github.io/url-encoder/

where I get the ready for css result from.

resulting in the final result

my css file

.customToggler2 ::ng-deep chevronrighticon { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='18' viewBox='0 0 576 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64V352c0 35.3 28.7 64 64 64H240l-10.7 32H160c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H346.7L336 416H512c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H64zM512 64V288H64V64H512z'/%3E%3C/svg%3E"); }

.customToggler2 ::ng-deep chevrondownicon { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='18' viewBox='0 0 576 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64V352c0 35.3 28.7 64 64 64H240l-10.7 32H160c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H346.7L336 416H512c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H64zM512 64V288H64V64H512z'/%3E%3C/svg%3E"); }

Upvotes: -1

Sriman Pathy
Sriman Pathy

Reputation: 259

You can achieve it globally like this in style.scss:

    sortalticon {
        display: none;
    }

    sortamountupalticon::before {
        content: "\2193";
    }

    sortamountdownicon::before {
        content: "\2191";
    }

    sortamountupalticon,
    sortamountdownicon {
        svg {
            display: none;
        }
    }

    sortamountupalticon::before,
    sortamountdownicon::before {
        font-size: 1rem;
        margin-top: -10px;
        margin-left: 0;
        color: var(--blue3);
    }

Upvotes: 5

Steve
Steve

Reputation: 14912

We figured it out, finally:

  <ng-template pTemplate="sorticon" field="col.field" let-sortOrder>
    <SortAltIcon *ngIf="sortOrder === 0">
      <span><i class="p-sortable-column-icon pi pi-fw pi-sort-alt" aria-hidden="true"></i></span>
    </SortAltIcon>
    <SortAmountUpAltIcon *ngIf="sortOrder === 1" [styleClass]="'p-sortable-column-icon'">
      <span><i class="p-sortable-column-icon pi pi-fw pi-sort-amount-up-alt" aria-hidden="true"></i></span>
    </SortAmountUpAltIcon>
    <SortAmountDownIcon *ngIf="sortOrder === -1" [styleClass]="'p-sortable-column-icon'">
      <span><i class="p-sortable-column-icon pi pi-fw pi-sort-amount-down" aria-hidden="true"></i></span>
    </SortAmountDownIcon>
  </ng-template>

Replace the i tag with the icon classes you want to use, or remove the i tag and use an SVG of your choosing.

Upvotes: 7

Related Questions