kendo react pdf can't export icons with colors

Question

I'm trying to display on my pdf doc icons with colors:

main.jsx :

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { PDFExport } from '@progress/kendo-react-pdf';

import EmailIcon from '@mui/icons-material/Email';

import { Icon } from '@progress/kendo-react-common';

import './styles.css';

const App = () => {
  const pdfExportComponent = React.useRef(null);

  return (
    <div>
      <button
        onClick={() => {
          pdfExportComponent.current.save();
        }}
      >
        Export PDF
      </button>

      <PDFExport
        paperSize="A4"
        ref={pdfExportComponent}
      >

        p
        
        <Icon name="twitter" style={{ color: 'red' }} />

        <EmailIcon cl sx={{ fontSize: 15, color: 'blue' }} />

      </PDFExport>
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector('my-app'));

But <Icon> disappeared , and <EmailIcon> is available only in black.

In styles.css I have the saved class of kendo react pdf called '.k-pdf-export' that should control all pdf css style

.k-pdf-export div {
  color: green;
}

But only the 'p' char become green' even if I delete style from both icons fron main.jsx

Please help my, I didn't find any solution for that :(

I tried to use mui icons, kendo react icons and kendo react pdf class for change icons colors

Answer 1

General internet/web based Icon/graphics characters are either a custom device orientated web font (Apple / Google / Microsoft "Emoji" fonts possibly as woff format) or are drawn as SVG objects or possibly both.

PDF historically does not generally support any of those modern constructions, so the PDF writer has to adapt them into a PDF compatible format.

The simplest way round the problem is use historic GIF as icons or use a monochrome outlined font which will usually be black and white, or use print as pdf where the browser can use a picture to replace the SVG objects

Here is the totally different output as produced for the PDF