Component icon Problem

[Ender Fatih]

Hello,

Icons are not being displayed in the components. I have tried everything, but the result is the same. As an example, I am sending images of the DocumentEditor and Dialog components. I have checked all the paths and they are correct. The CSS files are in place. Below is the content of my index.html and styles.css files. Even I remove the    <!-- Theme Styles --> part from the project same thing occurs.

index.html

<link rel='nofollow' rel='nofollow' href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />

<link rel="stylesheet" rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<link rel='nofollow' href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">

<link rel='nofollow' href="../../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <link rel='nofollow' href="../../assets/plugins/font-awesome/css/all.min.css" rel="stylesheet">

  <link rel='nofollow' href="../../assets/plugins/icomoon/style.css" rel="stylesheet">

  <link rel='nofollow' href="../../assets/plugins/switchery/switchery.min.css" rel="stylesheet">

  <!-- Theme Styles -->

  <link rel='nofollow' href="../../assets/css/concept.css" rel="stylesheet">

  <link rel='nofollow' href="../../assets/css/admin2.css" rel="stylesheet">

  <link rel='nofollow' href="../../assets/css/custom.css" rel="stylesheet">

styles.css

@import "~bootstrap/dist/css/bootstrap.css";

@import "~font-awesome/css/font-awesome.min.css";

@import "~alertifyjs/build/css/alertify.min.css";

@import "~alertifyjs/build/css/themes/bootstrap.min.css";

@import '~@syncfusion/ej2-base/styles/material.css';

@import '~@syncfusion/ej2-buttons/styles/material.css';

@import '~@syncfusion/ej2-inputs/styles/material.css';

@import '~@syncfusion/ej2-splitbuttons/styles/material.css';

@import '~@syncfusion/ej2-angular-inputs/styles/material.css';

@import '~@syncfusion/ej2-icons/styles/material.css';

@import '~@syncfusion/ej2-angular-popups/styles/material.css';

@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');

@import '~@syncfusion/ej2-lists/styles/material.css';

@import '~@syncfusion/ej2-calendars/styles/material.css';

@import '~@syncfusion/ej2-angular-calendars/styles/material.css';

@import "~@syncfusion/ej2-angular-base/styles/material.css";

@import "~@syncfusion/ej2-angular-buttons/styles/material.css";

@import '~@syncfusion/ej2-dropdowns/styles/material.css';

@import '~@syncfusion/ej2-angular-dropdowns/styles/material.css';

@import "~@syncfusion/ej2-navigations/styles/material.css";

@import '~@syncfusion/ej2-angular-navigations/styles/material.css';

@import '~@syncfusion/ej2-notifications/styles/material.css';

@import '~@syncfusion/ej2-angular-notifications/styles/material.css';

@import '~@syncfusion/ej2-popups/styles/material.css';

@import '~@syncfusion/ej2-angular-documenteditor/styles/material.css';

I kindly request your assistance. I haven't been able to figure out where I am making a mistake.

Attachment: documentEditorDialogzip_a62aad66.zip

[Dhanush Sekar]

Hi Ender,

We have validated your query and based on the provided information, you have used both CDN and package-based style. Could you please use any one of them? if you are using the CDN link, then use the version-based style link like below

https://cdn.syncfusion.com/ej2/26.1.42/material.css

Please share the simple sample still if you are facing the issue.

Regards,

Dhanush S