diff --git a/knowledge-base/editor-add-icons.md b/knowledge-base/editor-add-icons.md
index 9f0690d371..31145387b6 100644
--- a/knowledge-base/editor-add-icons.md
+++ b/knowledge-base/editor-add-icons.md
@@ -51,7 +51,7 @@ This means that you need to inject the icons stylesheet into the `<iframe>`, so
 @inject IJSRuntime js
 
 <TelerikEditor @bind-Value="@EditorValue"
-               Tools="@EditorTools"
+               Tools="@EditorToolSets.All"
                Schema="schemaProvider"
                Height="300px">
 </TelerikEditor>
@@ -59,8 +59,6 @@ This means that you need to inject the icons stylesheet into the `<iframe>`, so
 @code {
     private string EditorValue { get; set; } = @"<p>Here is an example icon in the Editor content <i class='fa fa-info-circle'></i></p>";
 
-    private List<IEditorTool> EditorTools { get; set; } = new List<IEditorTool>() { new ViewHtml() };
-
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
@@ -103,9 +101,13 @@ This means that you need to inject the icons stylesheet into the `<iframe>`, so
         const schema = args.getSchema();
         const Schema = args.ProseMirror.Schema
 
+        // remove the default i mark that does not support the class attribute
+        let marks = schema.spec.marks.remove("i");
+
+        // add the modified i as a node
         let nodes = schema.spec.nodes.addToEnd("i", iconNode);
 
-        const newSchema = new Schema({ nodes });
+        const newSchema = new Schema({ nodes, marks });
         return newSchema;
     }
 
@@ -155,7 +157,7 @@ Make sure to use the correct way and resources for your actual project *@
 @code {
     private string EditorValue { get; set; } = @"Here is an example icon in the Editor content <i class='fa fa-info-circle'></i>";
 
-    private List<IEditorTool> EditorTools { get; set; } = new List<IEditorTool>() { new ViewHtml() };
+    private List<IEditorTool> EditorTools { get; set; } = EditorToolSets.All;
 }
 
 @* Move JavaScript code to a separate JS file in production *@
@@ -185,16 +187,19 @@ Make sure to use the correct way and resources for your actual project *@
             return ["i", attrs];
         },
     };
-    debugger
 
     //add the icon node to the Editor ProseMirror schema
     window.schemaProvider = (args) => {
         const schema = args.getSchema();
         const Schema = args.ProseMirror.Schema
 
+        // remove the default i mark that does not support the class attribute
+        let marks = schema.spec.marks.remove("i");
+
+        // add the modified i as a node
         let nodes = schema.spec.nodes.addToEnd("i", iconNode);
 
-        const newSchema = new Schema({ nodes });
+        const newSchema = new Schema({ nodes, marks });
         return newSchema;
     }
 
@@ -204,4 +209,4 @@ Make sure to use the correct way and resources for your actual project *@
 ## See Also
 
 * [Custom Editor Tools]({%slug editor-custom-tools%})
-* [Modify the ProseMirror Schema]({%slug editor-modify-default-schema%})
\ No newline at end of file
+* [Modify the ProseMirror Schema]({%slug editor-modify-default-schema%})