Change row expansion icon in table-CodePudding

I am working on an angular app. In this I am using primeng table row expansion feature. Example with code is as follows:

https://www.primefaces.org/primeng/v12/#/table/rowexpansion

In this primeng is using their own icon on row expansion, code for which is as follows:

<button type="button" pButton pRipple [pRowToggler]="product"  [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>

Stackblitz :

https://stackblitz.com/edit/primeng-tablerowexpansion-demo

I don't want to use their icon. I want to use my own icon when row is expanded and when row is collapsed. How can I do that?

CodePudding user response：

You are using primefaces to show icons. So just add your icons as some custom icons to the style.css and then replace them with the old ones.

1- Add custom icons to style.css:

.custom-svg-icon-1 {
   background: url('https://www.svgrepo.com/show/305186/close.svg');
   height: 20px;
   width: 20px;
 }

2- Use the custom icons in your button tag:

       <button
         type="button"
         pButton
         pRipple
         [pRowToggler]="product"
         
         [icon]="expanded ? 'pi custom-svg-icon-1' : 'pi custom-svg-icon-0'"
       ></button>

The result: https://stackblitz.com/edit/primeng-tablerowexpansion-demo-p4m51s?file=src/app/app.component.html

CodePudding user response：

You could try this- in your html component file, change the button's icon classes:

<button [icon]="expanded ? 'myArrowDown' : 'myArrowRight'"></button>

Then go to styles.css file and create the icons, something like this:

.myArrowRight {
    width: 15px;
    height: 15px;
    background-image: url('path to your custom icon');
    background-size: 100% 100%;
}
.myArrowDown {
    width: 15px;
    height: 15px;
    background-image: url('path to your custom icon');
    background-size: 100% 100%;
 }