We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Can not visible icons & outlines

Thread ID:





145093 Jun 6,2019 07:23 AM UTC Jun 7,2019 10:12 AM UTC Angular - EJ 2 1
Tags: RichTextEditor
Asked On June 6, 2019 07:23 AM UTC

Hi all,

I followed RicjTextEditor creation from the documentation. But I couldn't create the UI component, It's not loading icons & outlines. I think the problem in the css. But I followed the documentation well.

* Put css content in "myForm.component.css"
* Add relevant imports to app.module.ts & myForm.component.ts

.e-code-mirror::before {
content: '\e345';
.CodeMirror-gutters {
display: none;

.char_block {
display: inline-block;
.char_block.e-active {
/* box-shadow: inset 3px 3px 7px 0px; */
outline: 1.5px solid;

.char_block {
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 5px 5px 0;
text-align: center;
vertical-align: middle;
border: 1px solid #DDDDDD;
font-size: 20px;
cursor: pointer;
user-select: none;

#custom_tbar div{
cursor: pointer;

#rteSection {
height: 500px;
.e-rte-quick-popup .e-rte-quick-toolbar .e-roatate-left::before {
content: "\e76e";

.e-rte-quick-popup .e-rte-quick-toolbar .e-roatate-right::before {
content: "\e726";

.e-richtexteditor textarea.e-content {
float: left;
.e-richtexteditor .e-rte-content {
overflow: hidden;
.e-rte-content .e-content.e-pre-source{
width: 100%;

.property-panel-content td{
width: 50%;
.property-panel-content td div {
padding-left: 10px;
padding-top: 10px;

.e-icon-btn.e-active .e-md-preview::before {
content: '\e350';

.e-icon-btn .e-md-preview.e-icons::before {
content: '\e345';
.e-icon-btn.e-active .e-md-preview::before,
#mdCustom .e-icon-btn.e-active .e-md-preview.e-icons::before {
content: '\e350';
#mdCustom .e-icon-btn .e-md-preview.e-icons::before {
content: '\e345';

#rteDialog.e-dialog .e-dlg-content {
padding: 0px 0px 5px 16px;
#custom_tbar .e-tbar-btn-text {
font-size: 16px;
.e-bigger #custom_tbar .e-tbar-btn-text {
font-size: 18px;

@media (min-width: 320px) and (max-width: 480px) {
.fabric.e-bigger #rteDialog {
min-width: 281px;

.fabric #rteDialog {
min-width: 241px;

.bootstrap.e-bigger #rteDialog,
.bootstrap #rteDialog {
min-width: 223px;

.highcontrast.e-bigger #rteDialog {
min-width: 283px;
.highcontrast #rteDialog {
min-width: 243px;
.material #rteDialog {
min-width: 224px;
.material.e-bigger #rteDialog {
min-width: 236px;

* Screenshot


Prince Oliver [Syncfusion]
Replied On June 7, 2019 10:12 AM UTC

Hello Isanka, 

Greetings from Syncfusion support. 

Based on the shared information, we suspect that the issue might have occurred due to missing CSS files required to render the control. We suggest you to check our getting started and adding CSS reference sections. 

You can also resolve the issue by adding the reference to the online CDN link for the styles. 

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

We have attached a sample for undo redo manager for your reference, please find it in the following location:  

Let us know if you need any further assistance on this. 



This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon