I've managed to solve this problem by replacing background-image with content.

Css below:

.m-icon {
 content: url("../images/module.png");
}

To change say search icon in a button

you can access https://react-icons.github.io/react-icons/search?q=fasearch

right click on the icon and inspect the elements, copy the SVG for the same from the developer console
create say search.svg file and paste the svg for fasearch in the file add below class in say root.css file

.pi-search:before {
  content: url(search.svg) !important;
}

This will change the search icon

We were able to use material-icons and still have the same functionality. However, you need to create a class for each icon you will use. I think that is a little price to pay for this feature.

1. First install material icons $ npm install material-design-icons
2. We imported the CSS like so @import 'material-design-icons/iconfont/material-icons.css'; You can import it using the standard way with Link tag

Create a class like so

.dms-mat-icon-email::before {
  content: "email" /* This is the icon name from material */;
}

You can now use the class like so

<Button
  icon="material-icons dms-mat-icon-email"
></Button>

We are using a wrapper component to dynamically pass the icon so we don't hardcode it

import * as React from "react";
import { Button } from "primereact/button";
import { Color } from "../theme/DMSTheme";
import classNames from "classnames";

interface IDMSButtonProps {
  label?: string;
  icon?: string;
  iconPos?: string;
  color?: Color;
  type:string;
}

const DMSButton: React.FunctionComponent<IDMSButtonProps> = (props) => {
  return (
    <Button
    type = {props.type}
      className={classNames({
        "dms-clr-text" : props.color && props.color === Color.Text,
        "p-button-text p-button-rounded": !props.label,
        "p-button-secondary" : props.color && props.color === Color.Secondary,
      })}
      iconPos={props.iconPos}
      label={props.label}
      icon={props.icon ? `material-icons dms-mat-icon-${props.icon}` : ""}
    ></Button>
  );
};

export default DMSButton;

If anyone has a better idea to simplify this, please comment!

Here is a working example replacing the Sort icons of the Datatable as well: https://stackblitz.com/edit/react-h8t1sm?file=src%2FApp.js