PrimeNG >= 18

Since v18, ripple effect can be configured inside the new providePrimeNG provider function :

bootstrapApplication(RootComponent, {
  providers: [
    ..., // other providers
    providePrimeNG({
        ...,
        ripple: true
    })
  ]
});

PrimeNG <= 18

A summary for ripple effect on PrimeNG buttons :

Ripple effect is enabled globally by the PrimeNGConfig object. You must set the ripple property to true. Personnally, I prefer to do it inside the APP_INITIALIZER token, not in AppComponent :

app.module.ts

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';

const initializeAppFactory = (primeConfig: PrimeNGConfig) => () => {
      // ......
      primeConfig.ripple = true;
    };

     @NgModule({
        // .....
        providers: [
           {
              provide: APP_INITIALIZER,
              useFactory: initializeAppFactory,
              deps: [PrimeNGConfig],
              multi: true,
           },
        ]
     })
    export class AppModule {}

Ripple effect only works with the help of pRipple directive from the RippleModule. This directive internally check if the ripple property from PrimeNGConfig is set to true.

The p-button component's already using pRipple directive inside his template. So, if you have enabled ripple effect globally, you have nothing more to do and you don't have to import RippleModule.

The confusing parts :

BUT, if you use an html button element with the pButton directive, you won't have ripple effect by default. You must manually add the pRipple directive and import RippleModule. (<button pButton pRipple ....>TEST</button>).

I think it's because is used to add secondary action to button so when you click on the secondary action area it prevent primaryAction to happen. So in your case when you click on right icon it contains the ripple affect inside ListItemSecondaryAction area. If you want to disable ripple on the List you can add prop 'disableRipple' on your ListItem and it will be disabled but if you want it conditional ie. when user clicks on icon ripple should happen only on icon and if clicked on button only in button than you can try stop propagation when clicked on button ( might not work ) but you can give it a try.

I've created a work around sharing codesandbox link with you

https://codesandbox.io/s/material-demo-forked-i7k7e?file=/demo.js

        <ListItem
          button
          disableRipple
          selected={selectedIndex === 0}
          onClick={(event) => handleListItemClick(event, 0)}
          style={{ position: "relative" }}
        >
          <div style={{ zIndex: 1 }}>
            <ListItemIcon>
              <IconButton edge="end" aria-label="delete">
                <DeleteIcon />
              </IconButton>
            </ListItemIcon>
            <ListItemText primary="Inbox" />
            <ListItemSecondaryAction>
              <IconButton edge="end" aria-label="delete">
                <DeleteIcon />
              </IconButton>
            </ListItemSecondaryAction>
          </div>
          <ButtonBase
            style={{
              position: "absolute",
              bottom: 0,
              top: 0,
              left: 0,
              right: 0,
              width: "100%",
              zIndex: 0
            }}
          />
        </ListItem>