diff --git a/docs/styling/examples/icons/actions/main.html b/docs/styling/examples/icons/actions/main.html
index 9fd84bc4..c55eb35c 100644
--- a/docs/styling/examples/icons/actions/main.html
+++ b/docs/styling/examples/icons/actions/main.html
@@ -1,5 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
+      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css"
+    />
 
 <head>
     <meta charset="UTF-8">
@@ -9,79 +22,79 @@
     <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />
     
     <style>
-        .WebComponentsIcons {
-            list-style: none;
-            margin: 0;
-            padding: 0;
-        }
+      .WebComponentsIcons {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
 
-        .WebComponentsIcons::after {
-            content: "";
-            display: block;
-            clear: both;
-            height: 0;
-            line-height: 0;
-        }
+      .WebComponentsIcons::after {
+        content: "";
+        display: block;
+        clear: both;
+        height: 0;
+        line-height: 0;
+      }
 
-        .WebComponentsIcons li {
-            margin: 10px;
-            padding: 10px;
-            display: block;
-            float: left;
-            vertical-align: top;
-            text-align: center;
-            width: 160px;
-            height: 92px;
-            font-size: 12px;
-            line-height: 1em;
-            font-weight: 300;
-            color: #999;
-        }
+      .WebComponentsIcons li {
+        margin: 10px;
+        padding: 10px;
+        display: block;
+        float: left;
+        vertical-align: top;
+        text-align: center;
+        width: 160px;
+        height: 92px;
+        font-size: 12px;
+        line-height: 1em;
+        font-weight: 300;
+        color: #999;
+      }
 
-        .WebComponentsIcons li:before {
-            display: none;
-        }
+      .WebComponentsIcons li:before {
+        display: none;
+      }
 
-        .WebComponentsIcons .k-icon {
-            display: block;
-            clear: both;
-            margin: 0 auto 10px;
-            color: #656565;
-            font-size: 32px;
-        }
+      .WebComponentsIcons .k-icon.k-font-icon {
+        display: block;
+        clear: both;
+        margin: 0 auto 10px;
+        color: #656565;
+        font-size: 32px;
+      }
 
-        .obsolete-classes {
-            width: 100%;
-            max-width: 900px;
-            text-align: left;
-            border-collapse: collapse;
-        }
+      .obsolete-classes {
+        width: 100%;
+        max-width: 900px;
+        text-align: left;
+        border-collapse: collapse;
+      }
 
-        .obsolete-classes th,
-        .obsolete-classes td {
-            padding: 10px 0;
-            border-bottom: 1px solid #ececec;
-        }
+      .obsolete-classes th,
+      .obsolete-classes td {
+        padding: 10px 0;
+        border-bottom: 1px solid #ececec;
+      }
 
-        .obsolete-classes th {
-            padding: 0 0 5px;
-        }
+      .obsolete-classes th {
+        padding: 0 0 5px;
+      }
 
-        .old-class {
-            color: #f31700;
-        }
+      .old-class {
+        color: #f31700;
+      }
 
-        .new-class {
-            color: #5ec232;
-        }
+      .new-class {
+        color: #5ec232;
+      }
 
-        .ref-icon {
-            width: 60px;
-        }
+      .ref-icon {
+        width: 60px;
+      }
     </style>
-</head>
+  </head>
 
-<body>
+  <body>
     <ul class="WebComponentsIcons">
         <li><span class="k-icon k-font-icon k-i-undo"></span> .k-i-undo</li>
         <li><span class="k-icon k-font-icon k-i-redo"></span> .k-i-redo</li>
@@ -156,6 +169,5 @@
         <li><span class="k-icon k-font-icon k-i-plus-sm"></span> .k-i-plus-sm</li>
         <li><span class="k-icon k-font-icon k-i-minus-sm"></span> .k-i-minus-sm</li>
     </ul>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/docs/styling/examples/icons/alerts-n-notifications/main.html b/docs/styling/examples/icons/alerts-n-notifications/main.html
index 2f0e29b5..48a15b30 100644
--- a/docs/styling/examples/icons/alerts-n-notifications/main.html
+++ b/docs/styling/examples/icons/alerts-n-notifications/main.html
@@ -1,5 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
+      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css"
+    />
 
 <head>
     <meta charset="UTF-8">
@@ -9,79 +22,79 @@
     <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />
     
     <style>
-        .WebComponentsIcons {
-            list-style: none;
-            margin: 0;
-            padding: 0;
-        }
+      .WebComponentsIcons {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
 
-        .WebComponentsIcons::after {
-            content: "";
-            display: block;
-            clear: both;
-            height: 0;
-            line-height: 0;
-        }
+      .WebComponentsIcons::after {
+        content: "";
+        display: block;
+        clear: both;
+        height: 0;
+        line-height: 0;
+      }
 
-        .WebComponentsIcons li {
-            margin: 10px;
-            padding: 10px;
-            display: block;
-            float: left;
-            vertical-align: top;
-            text-align: center;
-            width: 160px;
-            height: 92px;
-            font-size: 12px;
-            line-height: 1em;
-            font-weight: 300;
-            color: #999;
-        }
+      .WebComponentsIcons li {
+        margin: 10px;
+        padding: 10px;
+        display: block;
+        float: left;
+        vertical-align: top;
+        text-align: center;
+        width: 160px;
+        height: 92px;
+        font-size: 12px;
+        line-height: 1em;
+        font-weight: 300;
+        color: #999;
+      }
 
-        .WebComponentsIcons li:before {
-            display: none;
-        }
+      .WebComponentsIcons li:before {
+        display: none;
+      }
 
-        .WebComponentsIcons .k-icon {
-            display: block;
-            clear: both;
-            margin: 0 auto 10px;
-            color: #656565;
-            font-size: 32px;
-        }
+      .WebComponentsIcons .k-icon.k-font-icon {
+        display: block;
+        clear: both;
+        margin: 0 auto 10px;
+        color: #656565;
+        font-size: 32px;
+      }
 
-        .obsolete-classes {
-            width: 100%;
-            max-width: 900px;
-            text-align: left;
-            border-collapse: collapse;
-        }
+      .obsolete-classes {
+        width: 100%;
+        max-width: 900px;
+        text-align: left;
+        border-collapse: collapse;
+      }
 
-        .obsolete-classes th,
-        .obsolete-classes td {
-            padding: 10px 0;
-            border-bottom: 1px solid #ececec;
-        }
+      .obsolete-classes th,
+      .obsolete-classes td {
+        padding: 10px 0;
+        border-bottom: 1px solid #ececec;
+      }
 
-        .obsolete-classes th {
-            padding: 0 0 5px;
-        }
+      .obsolete-classes th {
+        padding: 0 0 5px;
+      }
 
-        .old-class {
-            color: #f31700;
-        }
+      .old-class {
+        color: #f31700;
+      }
 
-        .new-class {
-            color: #5ec232;
-        }
+      .new-class {
+        color: #5ec232;
+      }
 
-        .ref-icon {
-            width: 60px;
-        }
+      .ref-icon {
+        width: 60px;
+      }
     </style>
-</head>
+  </head>
 
-<body>
+  <body>
     <ul class="WebComponentsIcons">
         <li><span class="k-icon k-font-icon k-i-notification"></span> .k-i-notification<br /> .k-i-bell</li>
         <li><span class="k-icon k-font-icon k-i-information"></span> .k-i-information<br /> .k-i-info</li>
@@ -90,4 +103,4 @@
     </ul> 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/docs/styling/examples/icons/editing/main.html b/docs/styling/examples/icons/editing/main.html
index 11bccbd7..411bf4cc 100644
--- a/docs/styling/examples/icons/editing/main.html
+++ b/docs/styling/examples/icons/editing/main.html
@@ -10,80 +10,79 @@
     <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />
 
     <style>
-        .WebComponentsIcons {
-            list-style: none;
-            margin: 0;
-            padding: 0;
-        }
+      .WebComponentsIcons {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
 
-        .WebComponentsIcons::after {
-            content: "";
-            display: block;
-            clear: both;
-            height: 0;
-            line-height: 0;
-        }
+      .WebComponentsIcons::after {
+        content: "";
+        display: block;
+        clear: both;
+        height: 0;
+        line-height: 0;
+      }
 
-        .WebComponentsIcons li {
-            margin: 10px;
-            padding: 10px;
-            display: block;
-            float: left;
-            vertical-align: top;
-            text-align: center;
-            width: 160px;
-            height: 92px;
-            font-size: 12px;
-            line-height: 1em;
-            font-weight: 300;
-            color: #999;
-        }
+      .WebComponentsIcons li {
+        margin: 10px;
+        padding: 10px;
+        display: block;
+        float: left;
+        vertical-align: top;
+        text-align: center;
+        width: 160px;
+        height: 92px;
+        font-size: 12px;
+        line-height: 1em;
+        font-weight: 300;
+        color: #999;
+      }
 
-        .WebComponentsIcons li:before {
-            display: none;
-        }
+      .WebComponentsIcons li:before {
+        display: none;
+      }
 
-        .WebComponentsIcons .k-icon {
-            display: block;
-            clear: both;
-            margin: 0 auto 10px;
-            color: #656565;
-            font-size: 32px;
-        }
+      .WebComponentsIcons .k-icon.k-font-icon {
+        display: block;
+        clear: both;
+        margin: 0 auto 10px;
+        color: #656565;
+        font-size: 32px;
+      }
 
-        .obsolete-classes {
-            width: 100%;
-            max-width: 900px;
-            text-align: left;
-            border-collapse: collapse;
-        }
+      .obsolete-classes {
+        width: 100%;
+        max-width: 900px;
+        text-align: left;
+        border-collapse: collapse;
+      }
 
-        .obsolete-classes th,
-        .obsolete-classes td {
-            padding: 10px 0;
-            border-bottom: 1px solid #ececec;
-        }
+      .obsolete-classes th,
+      .obsolete-classes td {
+        padding: 10px 0;
+        border-bottom: 1px solid #ececec;
+      }
 
-        .obsolete-classes th {
-            padding: 0 0 5px;
-        }
+      .obsolete-classes th {
+        padding: 0 0 5px;
+      }
 
-        .old-class {
-            color: #f31700;
-        }
+      .old-class {
+        color: #f31700;
+      }
 
-        .new-class {
-            color: #5ec232;
-        }
+      .new-class {
+        color: #5ec232;
+      }
 
-        .ref-icon {
-            width: 60px;
-        }
+      .ref-icon {
+        width: 60px;
+      }
     </style>
-</head>
-
-<body>
+  </head>
 
+  <body>
     <ul class="WebComponentsIcons">
         <li><span class="k-icon k-font-icon k-i-page-properties"></span> .k-i-page-properties</li>
         <li><span class="k-icon k-font-icon k-i-bold"></span> .k-i-bold</li>
@@ -241,6 +240,5 @@
         <li><span class="k-icon k-font-icon k-i-font-size"></span> .k-i-font-size</li>
         <li><span class="k-icon k-font-icon k-i-image-absolute-position"></span> .k-i-image-absolute-position</li>
     </ul>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/docs/styling/examples/icons/files-n-folders/main.html b/docs/styling/examples/icons/files-n-folders/main.html
index dd91ee2e..cd458355 100644
--- a/docs/styling/examples/icons/files-n-folders/main.html
+++ b/docs/styling/examples/icons/files-n-folders/main.html
@@ -10,80 +10,79 @@
     <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />
 
     <style>
-        .WebComponentsIcons {
-            list-style: none;
-            margin: 0;
-            padding: 0;
-        }
+      .WebComponentsIcons {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
 
-        .WebComponentsIcons::after {
-            content: "";
-            display: block;
-            clear: both;
-            height: 0;
-            line-height: 0;
-        }
+      .WebComponentsIcons::after {
+        content: "";
+        display: block;
+        clear: both;
+        height: 0;
+        line-height: 0;
+      }
 
-        .WebComponentsIcons li {
-            margin: 10px;
-            padding: 10px;
-            display: block;
-            float: left;
-            vertical-align: top;
-            text-align: center;
-            width: 160px;
-            height: 92px;
-            font-size: 12px;
-            line-height: 1em;
-            font-weight: 300;
-            color: #999;
-        }
+      .WebComponentsIcons li {
+        margin: 10px;
+        padding: 10px;
+        display: block;
+        float: left;
+        vertical-align: top;
+        text-align: center;
+        width: 160px;
+        height: 92px;
+        font-size: 12px;
+        line-height: 1em;
+        font-weight: 300;
+        color: #999;
+      }
 
-        .WebComponentsIcons li:before {
-            display: none;
-        }
+      .WebComponentsIcons li:before {
+        display: none;
+      }
 
-        .WebComponentsIcons .k-icon {
-            display: block;
-            clear: both;
-            margin: 0 auto 10px;
-            color: #656565;
-            font-size: 32px;
-        }
+      .WebComponentsIcons .k-icon.k-font-icon {
+        display: block;
+        clear: both;
+        margin: 0 auto 10px;
+        color: #656565;
+        font-size: 32px;
+      }
 
-        .obsolete-classes {
-            width: 100%;
-            max-width: 900px;
-            text-align: left;
-            border-collapse: collapse;
-        }
+      .obsolete-classes {
+        width: 100%;
+        max-width: 900px;
+        text-align: left;
+        border-collapse: collapse;
+      }
 
-        .obsolete-classes th,
-        .obsolete-classes td {
-            padding: 10px 0;
-            border-bottom: 1px solid #ececec;
-        }
+      .obsolete-classes th,
+      .obsolete-classes td {
+        padding: 10px 0;
+        border-bottom: 1px solid #ececec;
+      }
 
-        .obsolete-classes th {
-            padding: 0 0 5px;
-        }
+      .obsolete-classes th {
+        padding: 0 0 5px;
+      }
 
-        .old-class {
-            color: #f31700;
-        }
+      .old-class {
+        color: #f31700;
+      }
 
-        .new-class {
-            color: #5ec232;
-        }
+      .new-class {
+        color: #5ec232;
+      }
 
-        .ref-icon {
-            width: 60px;
-        }
+      .ref-icon {
+        width: 60px;
+      }
     </style>
-</head>
-
-<body>
+  </head>
 
+  <body>
     <ul class="WebComponentsIcons">
         <li><span class="k-icon k-font-icon k-i-folder"></span> .k-i-folder</li>
         <li><span class="k-icon k-font-icon k-i-folder-open"></span> .k-i-folder-open</li>
@@ -122,6 +121,5 @@
         <li><span class="k-icon k-font-icon k-i-file-horizontal"></span> .k-i-file-horizontal</li>
     
     </ul>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/docs/styling/examples/icons/images/main.html b/docs/styling/examples/icons/images/main.html
index 2b03f668..fe96e01d 100644
--- a/docs/styling/examples/icons/images/main.html
+++ b/docs/styling/examples/icons/images/main.html
@@ -10,79 +10,79 @@
     <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />
 
     <style>
-        .WebComponentsIcons {
-            list-style: none;
-            margin: 0;
-            padding: 0;
-        }
+      .WebComponentsIcons {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
 
-        .WebComponentsIcons::after {
-            content: "";
-            display: block;
-            clear: both;
-            height: 0;
-            line-height: 0;
-        }
+      .WebComponentsIcons::after {
+        content: "";
+        display: block;
+        clear: both;
+        height: 0;
+        line-height: 0;
+      }
 
-        .WebComponentsIcons li {
-            margin: 10px;
-            padding: 10px;
-            display: block;
-            float: left;
-            vertical-align: top;
-            text-align: center;
-            width: 160px;
-            height: 92px;
-            font-size: 12px;
-            line-height: 1em;
-            font-weight: 300;
-            color: #999;
-        }
+      .WebComponentsIcons li {
+        margin: 10px;
+        padding: 10px;
+        display: block;
+        float: left;
+        vertical-align: top;
+        text-align: center;
+        width: 160px;
+        height: 92px;
+        font-size: 12px;
+        line-height: 1em;
+        font-weight: 300;
+        color: #999;
+      }
 
-        .WebComponentsIcons li:before {
-            display: none;
-        }
+      .WebComponentsIcons li:before {
+        display: none;
+      }
 
-        .WebComponentsIcons .k-icon {
-            display: block;
-            clear: both;
-            margin: 0 auto 10px;
-            color: #656565;
-            font-size: 32px;
-        }
+      .WebComponentsIcons .k-icon.k-font-icon {
+        display: block;
+        clear: both;
+        margin: 0 auto 10px;
+        color: #656565;
+        font-size: 32px;
+      }
 
-        .obsolete-classes {
-            width: 100%;
-            max-width: 900px;
-            text-align: left;
-            border-collapse: collapse;
-        }
+      .obsolete-classes {
+        width: 100%;
+        max-width: 900px;
+        text-align: left;
+        border-collapse: collapse;
+      }
 
-        .obsolete-classes th,
-        .obsolete-classes td {
-            padding: 10px 0;
-            border-bottom: 1px solid #ececec;
-        }
+      .obsolete-classes th,
+      .obsolete-classes td {
+        padding: 10px 0;
+        border-bottom: 1px solid #ececec;
+      }
 
-        .obsolete-classes th {
-            padding: 0 0 5px;
-        }
+      .obsolete-classes th {
+        padding: 0 0 5px;
+      }
 
-        .old-class {
-            color: #f31700;
-        }
+      .old-class {
+        color: #f31700;
+      }
 
-        .new-class {
-            color: #5ec232;
-        }
+      .new-class {
+        color: #5ec232;
+      }
 
-        .ref-icon {
-            width: 60px;
-        }
+      .ref-icon {
+        width: 60px;
+      }
     </style>
-</head>
+  </head>
 
-<body>
+  <body>
     <ul class="WebComponentsIcons">
         <li><span class="k-icon k-font-icon k-i-photo-camera"></span> .k-i-photo-camera</li>
         <li><span class="k-icon k-font-icon k-i-image"></span> .k-i-image<br /> .k-i-photo</li>
@@ -129,6 +129,5 @@
         <li><span class="k-icon k-font-icon k-i-reset-color"></span> .k-i-reset-color<br /> .k-i-paint-remove<br />
             .k-i-background-remove</li>
     </ul>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/docs/styling/examples/icons/layout-n-navigation/main.html b/docs/styling/examples/icons/layout-n-navigation/main.html
index b39ce9ad..69f3af9b 100644
--- a/docs/styling/examples/icons/layout-n-navigation/main.html
+++ b/docs/styling/examples/icons/layout-n-navigation/main.html
@@ -10,80 +10,79 @@
     <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />
 
     <style>
-        .WebComponentsIcons {
-            list-style: none;
-            margin: 0;
-            padding: 0;
-        }
+      .WebComponentsIcons {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
 
-        .WebComponentsIcons::after {
-            content: "";
-            display: block;
-            clear: both;
-            height: 0;
-            line-height: 0;
-        }
+      .WebComponentsIcons::after {
+        content: "";
+        display: block;
+        clear: both;
+        height: 0;
+        line-height: 0;
+      }
 
-        .WebComponentsIcons li {
-            margin: 10px;
-            padding: 10px;
-            display: block;
-            float: left;
-            vertical-align: top;
-            text-align: center;
-            width: 160px;
-            height: 92px;
-            font-size: 12px;
-            line-height: 1em;
-            font-weight: 300;
-            color: #999;
-        }
+      .WebComponentsIcons li {
+        margin: 10px;
+        padding: 10px;
+        display: block;
+        float: left;
+        vertical-align: top;
+        text-align: center;
+        width: 160px;
+        height: 92px;
+        font-size: 12px;
+        line-height: 1em;
+        font-weight: 300;
+        color: #999;
+      }
 
-        .WebComponentsIcons li:before {
-            display: none;
-        }
+      .WebComponentsIcons li:before {
+        display: none;
+      }
 
-        .WebComponentsIcons .k-icon {
-            display: block;
-            clear: both;
-            margin: 0 auto 10px;
-            color: #656565;
-            font-size: 32px;
-        }
+      .WebComponentsIcons .k-icon.k-font-icon {
+        display: block;
+        clear: both;
+        margin: 0 auto 10px;
+        color: #656565;
+        font-size: 32px;
+      }
 
-        .obsolete-classes {
-            width: 100%;
-            max-width: 900px;
-            text-align: left;
-            border-collapse: collapse;
-        }
+      .obsolete-classes {
+        width: 100%;
+        max-width: 900px;
+        text-align: left;
+        border-collapse: collapse;
+      }
 
-        .obsolete-classes th,
-        .obsolete-classes td {
-            padding: 10px 0;
-            border-bottom: 1px solid #ececec;
-        }
+      .obsolete-classes th,
+      .obsolete-classes td {
+        padding: 10px 0;
+        border-bottom: 1px solid #ececec;
+      }
 
-        .obsolete-classes th {
-            padding: 0 0 5px;
-        }
+      .obsolete-classes th {
+        padding: 0 0 5px;
+      }
 
-        .old-class {
-            color: #f31700;
-        }
+      .old-class {
+        color: #f31700;
+      }
 
-        .new-class {
-            color: #5ec232;
-        }
+      .new-class {
+        color: #5ec232;
+      }
 
-        .ref-icon {
-            width: 60px;
-        }
+      .ref-icon {
+        width: 60px;
+      }
     </style>
-</head>
-
-<body>
+  </head>
 
+  <body>
     <ul class="WebComponentsIcons">
         <li><span class="k-icon k-font-icon k-i-arrow-45-up-right"></span> .k-i-arrow-45-up-right<br /> .k-i-collapse-ne<br />
             .k-i-resize-ne</li>
@@ -144,6 +143,5 @@
         <li><span class="k-icon k-font-icon k-i-more-vertical"></span> .k-i-more-vertical</li>
         <li><span class="k-icon k-font-icon k-i-more-horizontal"></span> .k-i-more-horizontal</li>
     </ul>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/docs/styling/examples/icons/mapping/main.html b/docs/styling/examples/icons/mapping/main.html
index 879d9d7e..6c7cf3a9 100644
--- a/docs/styling/examples/icons/mapping/main.html
+++ b/docs/styling/examples/icons/mapping/main.html
@@ -10,80 +10,79 @@
     <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />
 
     <style>
-        .WebComponentsIcons {
-            list-style: none;
-            margin: 0;
-            padding: 0;
-        }
+      .WebComponentsIcons {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
 
-        .WebComponentsIcons::after {
-            content: "";
-            display: block;
-            clear: both;
-            height: 0;
-            line-height: 0;
-        }
+      .WebComponentsIcons::after {
+        content: "";
+        display: block;
+        clear: both;
+        height: 0;
+        line-height: 0;
+      }
 
-        .WebComponentsIcons li {
-            margin: 10px;
-            padding: 10px;
-            display: block;
-            float: left;
-            vertical-align: top;
-            text-align: center;
-            width: 160px;
-            height: 92px;
-            font-size: 12px;
-            line-height: 1em;
-            font-weight: 300;
-            color: #999;
-        }
+      .WebComponentsIcons li {
+        margin: 10px;
+        padding: 10px;
+        display: block;
+        float: left;
+        vertical-align: top;
+        text-align: center;
+        width: 160px;
+        height: 92px;
+        font-size: 12px;
+        line-height: 1em;
+        font-weight: 300;
+        color: #999;
+      }
 
-        .WebComponentsIcons li:before {
-            display: none;
-        }
+      .WebComponentsIcons li:before {
+        display: none;
+      }
 
-        .WebComponentsIcons .k-icon {
-            display: block;
-            clear: both;
-            margin: 0 auto 10px;
-            color: #656565;
-            font-size: 32px;
-        }
+      .WebComponentsIcons .k-icon.k-font-icon {
+        display: block;
+        clear: both;
+        margin: 0 auto 10px;
+        color: #656565;
+        font-size: 32px;
+      }
 
-        .obsolete-classes {
-            width: 100%;
-            max-width: 900px;
-            text-align: left;
-            border-collapse: collapse;
-        }
+      .obsolete-classes {
+        width: 100%;
+        max-width: 900px;
+        text-align: left;
+        border-collapse: collapse;
+      }
 
-        .obsolete-classes th,
-        .obsolete-classes td {
-            padding: 10px 0;
-            border-bottom: 1px solid #ececec;
-        }
+      .obsolete-classes th,
+      .obsolete-classes td {
+        padding: 10px 0;
+        border-bottom: 1px solid #ececec;
+      }
 
-        .obsolete-classes th {
-            padding: 0 0 5px;
-        }
+      .obsolete-classes th {
+        padding: 0 0 5px;
+      }
 
-        .old-class {
-            color: #f31700;
-        }
+      .old-class {
+        color: #f31700;
+      }
 
-        .new-class {
-            color: #5ec232;
-        }
+      .new-class {
+        color: #5ec232;
+      }
 
-        .ref-icon {
-            width: 60px;
-        }
+      .ref-icon {
+        width: 60px;
+      }
     </style>
-</head>
-
-<body>
+  </head>
 
+  <body>
     <ul class="WebComponentsIcons">
         <li><span class="k-icon k-font-icon k-i-globe-outline"></span> .k-i-globe-outline</li>
         <li><span class="k-icon k-font-icon k-i-globe"></span> .k-i-globe</li>
@@ -92,6 +91,5 @@
         <li><span class="k-icon k-font-icon k-i-pin"></span> .k-i-pin</li>
         <li><span class="k-icon k-font-icon k-i-unpin"></span> .k-i-unpin</li>
     </ul>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/docs/styling/examples/icons/media/main.html b/docs/styling/examples/icons/media/main.html
index d6f8cde6..f12f7a29 100644
--- a/docs/styling/examples/icons/media/main.html
+++ b/docs/styling/examples/icons/media/main.html
@@ -10,79 +10,79 @@
     <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />
 
     <style>
-        .WebComponentsIcons {
-            list-style: none;
-            margin: 0;
-            padding: 0;
-        }
+      .WebComponentsIcons {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
 
-        .WebComponentsIcons::after {
-            content: "";
-            display: block;
-            clear: both;
-            height: 0;
-            line-height: 0;
-        }
+      .WebComponentsIcons::after {
+        content: "";
+        display: block;
+        clear: both;
+        height: 0;
+        line-height: 0;
+      }
 
-        .WebComponentsIcons li {
-            margin: 10px;
-            padding: 10px;
-            display: block;
-            float: left;
-            vertical-align: top;
-            text-align: center;
-            width: 160px;
-            height: 92px;
-            font-size: 12px;
-            line-height: 1em;
-            font-weight: 300;
-            color: #999;
-        }
+      .WebComponentsIcons li {
+        margin: 10px;
+        padding: 10px;
+        display: block;
+        float: left;
+        vertical-align: top;
+        text-align: center;
+        width: 160px;
+        height: 92px;
+        font-size: 12px;
+        line-height: 1em;
+        font-weight: 300;
+        color: #999;
+      }
 
-        .WebComponentsIcons li:before {
-            display: none;
-        }
+      .WebComponentsIcons li:before {
+        display: none;
+      }
 
-        .WebComponentsIcons .k-icon {
-            display: block;
-            clear: both;
-            margin: 0 auto 10px;
-            color: #656565;
-            font-size: 32px;
-        }
+      .WebComponentsIcons .k-icon.k-font-icon {
+        display: block;
+        clear: both;
+        margin: 0 auto 10px;
+        color: #656565;
+        font-size: 32px;
+      }
 
-        .obsolete-classes {
-            width: 100%;
-            max-width: 900px;
-            text-align: left;
-            border-collapse: collapse;
-        }
+      .obsolete-classes {
+        width: 100%;
+        max-width: 900px;
+        text-align: left;
+        border-collapse: collapse;
+      }
 
-        .obsolete-classes th,
-        .obsolete-classes td {
-            padding: 10px 0;
-            border-bottom: 1px solid #ececec;
-        }
+      .obsolete-classes th,
+      .obsolete-classes td {
+        padding: 10px 0;
+        border-bottom: 1px solid #ececec;
+      }
 
-        .obsolete-classes th {
-            padding: 0 0 5px;
-        }
+      .obsolete-classes th {
+        padding: 0 0 5px;
+      }
 
-        .old-class {
-            color: #f31700;
-        }
+      .old-class {
+        color: #f31700;
+      }
 
-        .new-class {
-            color: #5ec232;
-        }
+      .new-class {
+        color: #5ec232;
+      }
 
-        .ref-icon {
-            width: 60px;
-        }
+      .ref-icon {
+        width: 60px;
+      }
     </style>
-</head>
+  </head>
 
-<body>
+  <body>
     <ul class="WebComponentsIcons">
         <li><span class="k-icon k-font-icon k-i-play"></span> .k-i-play</li>
         <li><span class="k-icon k-font-icon k-i-pause"></span> .k-i-pause</li>
@@ -97,6 +97,5 @@
         <li><span class="k-icon k-font-icon k-i-playlist"></span> .k-i-playlist</li>
         <li><span class="k-icon k-font-icon k-i-audio"></span> .k-i-audio</li>
     </ul>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/docs/styling/examples/icons/social-sharing/main.html b/docs/styling/examples/icons/social-sharing/main.html
index bfe6d460..8de526b1 100644
--- a/docs/styling/examples/icons/social-sharing/main.html
+++ b/docs/styling/examples/icons/social-sharing/main.html
@@ -10,80 +10,79 @@
     <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />
 
     <style>
-        .WebComponentsIcons {
-            list-style: none;
-            margin: 0;
-            padding: 0;
-        }
+      .WebComponentsIcons {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
 
-        .WebComponentsIcons::after {
-            content: "";
-            display: block;
-            clear: both;
-            height: 0;
-            line-height: 0;
-        }
+      .WebComponentsIcons::after {
+        content: "";
+        display: block;
+        clear: both;
+        height: 0;
+        line-height: 0;
+      }
 
-        .WebComponentsIcons li {
-            margin: 10px;
-            padding: 10px;
-            display: block;
-            float: left;
-            vertical-align: top;
-            text-align: center;
-            width: 160px;
-            height: 92px;
-            font-size: 12px;
-            line-height: 1em;
-            font-weight: 300;
-            color: #999;
-        }
+      .WebComponentsIcons li {
+        margin: 10px;
+        padding: 10px;
+        display: block;
+        float: left;
+        vertical-align: top;
+        text-align: center;
+        width: 160px;
+        height: 92px;
+        font-size: 12px;
+        line-height: 1em;
+        font-weight: 300;
+        color: #999;
+      }
 
-        .WebComponentsIcons li:before {
-            display: none;
-        }
+      .WebComponentsIcons li:before {
+        display: none;
+      }
 
-        .WebComponentsIcons .k-icon {
-            display: block;
-            clear: both;
-            margin: 0 auto 10px;
-            color: #656565;
-            font-size: 32px;
-        }
+      .WebComponentsIcons .k-icon.k-font-icon {
+        display: block;
+        clear: both;
+        margin: 0 auto 10px;
+        color: #656565;
+        font-size: 32px;
+      }
 
-        .obsolete-classes {
-            width: 100%;
-            max-width: 900px;
-            text-align: left;
-            border-collapse: collapse;
-        }
+      .obsolete-classes {
+        width: 100%;
+        max-width: 900px;
+        text-align: left;
+        border-collapse: collapse;
+      }
 
-        .obsolete-classes th,
-        .obsolete-classes td {
-            padding: 10px 0;
-            border-bottom: 1px solid #ececec;
-        }
+      .obsolete-classes th,
+      .obsolete-classes td {
+        padding: 10px 0;
+        border-bottom: 1px solid #ececec;
+      }
 
-        .obsolete-classes th {
-            padding: 0 0 5px;
-        }
+      .obsolete-classes th {
+        padding: 0 0 5px;
+      }
 
-        .old-class {
-            color: #f31700;
-        }
+      .old-class {
+        color: #f31700;
+      }
 
-        .new-class {
-            color: #5ec232;
-        }
+      .new-class {
+        color: #5ec232;
+      }
 
-        .ref-icon {
-            width: 60px;
-        }
+      .ref-icon {
+        width: 60px;
+      }
     </style>
-</head>
-
-<body>
+  </head>
 
+  <body>
     <ul class="WebComponentsIcons">
         <li><span class="k-icon k-font-icon k-i-share"></span> .k-i-share</li>
         <li><span class="k-icon k-font-icon k-i-user"></span> .k-i-user</li>
@@ -131,6 +130,5 @@
         <li><span class="k-icon k-font-icon k-i-youtube"></span> .k-i-youtube</li>
         <li><span class="k-icon k-font-icon k-i-youtube-box"></span> .k-i-youtube-box</li>
     </ul>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/docs/styling/examples/icons/toggle/main.html b/docs/styling/examples/icons/toggle/main.html
index 90a11d60..860881eb 100644
--- a/docs/styling/examples/icons/toggle/main.html
+++ b/docs/styling/examples/icons/toggle/main.html
@@ -10,80 +10,79 @@
     <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />
 
     <style>
-        .WebComponentsIcons {
-            list-style: none;
-            margin: 0;
-            padding: 0;
-        }
+      .WebComponentsIcons {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
 
-        .WebComponentsIcons::after {
-            content: "";
-            display: block;
-            clear: both;
-            height: 0;
-            line-height: 0;
-        }
+      .WebComponentsIcons::after {
+        content: "";
+        display: block;
+        clear: both;
+        height: 0;
+        line-height: 0;
+      }
 
-        .WebComponentsIcons li {
-            margin: 10px;
-            padding: 10px;
-            display: block;
-            float: left;
-            vertical-align: top;
-            text-align: center;
-            width: 160px;
-            height: 92px;
-            font-size: 12px;
-            line-height: 1em;
-            font-weight: 300;
-            color: #999;
-        }
+      .WebComponentsIcons li {
+        margin: 10px;
+        padding: 10px;
+        display: block;
+        float: left;
+        vertical-align: top;
+        text-align: center;
+        width: 160px;
+        height: 92px;
+        font-size: 12px;
+        line-height: 1em;
+        font-weight: 300;
+        color: #999;
+      }
 
-        .WebComponentsIcons li:before {
-            display: none;
-        }
+      .WebComponentsIcons li:before {
+        display: none;
+      }
 
-        .WebComponentsIcons .k-icon {
-            display: block;
-            clear: both;
-            margin: 0 auto 10px;
-            color: #656565;
-            font-size: 32px;
-        }
+      .WebComponentsIcons .k-icon.k-font-icon {
+        display: block;
+        clear: both;
+        margin: 0 auto 10px;
+        color: #656565;
+        font-size: 32px;
+      }
 
-        .obsolete-classes {
-            width: 100%;
-            max-width: 900px;
-            text-align: left;
-            border-collapse: collapse;
-        }
+      .obsolete-classes {
+        width: 100%;
+        max-width: 900px;
+        text-align: left;
+        border-collapse: collapse;
+      }
 
-        .obsolete-classes th,
-        .obsolete-classes td {
-            padding: 10px 0;
-            border-bottom: 1px solid #ececec;
-        }
+      .obsolete-classes th,
+      .obsolete-classes td {
+        padding: 10px 0;
+        border-bottom: 1px solid #ececec;
+      }
 
-        .obsolete-classes th {
-            padding: 0 0 5px;
-        }
+      .obsolete-classes th {
+        padding: 0 0 5px;
+      }
 
-        .old-class {
-            color: #f31700;
-        }
+      .old-class {
+        color: #f31700;
+      }
 
-        .new-class {
-            color: #5ec232;
-        }
+      .new-class {
+        color: #5ec232;
+      }
 
-        .ref-icon {
-            width: 60px;
-        }
+      .ref-icon {
+        width: 60px;
+      }
     </style>
-</head>
-
-<body>
+  </head>
 
+  <body>
     <ul class="WebComponentsIcons">
         <li><span class="k-icon k-font-icon k-i-heart-outline"></span> .k-i-heart-outline<br /> .k-i-fav-outline<br />
             .k-i-favorite-outline</li>
@@ -98,6 +97,5 @@
         <li><span class="k-icon k-font-icon k-i-radiobutton"></span> .k-i-radiobutton<br /> .k-i-shape-circle</li>
         <li><span class="k-icon k-font-icon k-i-radiobutton-checked"></span> .k-i-radiobutton-checked</li>
     </ul>
-</body>
-
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/docs/styling/icons.mdx b/docs/styling/icons.mdx
index 9ef28046..829ffc25 100644
--- a/docs/styling/icons.mdx
+++ b/docs/styling/icons.mdx
@@ -27,13 +27,41 @@ Font icons demonstrate significant benefits such as:
 
 ## Basic Usage
 
-To use the Kendo UI for Vue font icons:
+To use the Kendo UI font icons:
 
-1. [Load](slug:themesandstyles) a Kendo UI for Vue theme into your project.
-2. Assign a `k-icon` CSS class followed by a predefined class from the [list of font icons](#toc-list-of-font-icons) to an HTML tag. For example, the `<span>` element as demonstrated in the following example.
+1. [Load a Kendo UI theme](slug:themesandstyles) in your project.
+1. Load the font icons either by [using the precompiled CSS](#toc-loading-icons-through-precompiled-css) or by [using a CDN link](#toc-loading-icons-through-a-cdn).
+1. Add an empty `<span>` element that will hold the font icon.
+1. Assign a `k-icon k-font-icon` CSS classes that are followed by a predefined class from the [list of font icons](#toc-list-of-font-icons) to an HTML tag. For example:
+    ```html
+    <span class="k-icon k-font-icon k-i-calendar"></span>`.
+    ```
+
+### Loading Icons through Precompiled CSS
+
+1. To load the font icons by using precompiled CSS, install the `Kendo Font Icons` package through NPM.
+
+    ```sh
+    npm i @progress/kendo-font-icons
+    ```
+
+1. Import the precompiled CSS by using the following:
+
+    - Import the font icons in the `styles.scss` file.
+
+        ```scss
+        @import "@progress/kendo-font-icons/dist/index.css";
+        ```
+
+### Loading Icons through a CDN
+
+Import the font icons by using the following CDN link in your `index.html` file.
 
     ```html
-    <span class="k-icon k-i-calendar"></span>
+    <link 
+        rel="stylesheet" 
+        href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css"
+    />
     ```
 
 ## Rendering with Unicode Numbers
@@ -41,7 +69,7 @@ To use the Kendo UI for Vue font icons:
 Though the web icon font comes with a [set of predefined CSS classes](#toc-list-of-font-icons), you might need to use the icons with a custom CSS class name. To achieve this, set a `:before` pseudo content value for the relevant icon.
 
 ```html
-<span class="k-icon my-custom-icon-class"></span>
+<span class="k-icon k-font-icon my-custom-icon-class"></span>
 
 <style>
     .my-custom-icon-class:before {
@@ -81,15 +109,15 @@ You can set each of them by using the respective class:
 * `k-icon-xxxl`
 
 ```html
-<span class="k-icon k-i-gear k-icon-xs"></span>
-<span class="k-icon k-i-gear k-icon-md"></span>
-<span class="k-icon k-i-gear k-icon-xl"></span>
+<span class="k-icon k-font-icon k-i-gear k-icon-xs"></span>
+<span class="k-icon k-font-icon k-i-gear k-icon-md"></span>
+<span class="k-icon k-font-icon k-i-gear k-icon-xl"></span>
 ```
 
 For font icons, you can apply any custom size by using the CSS `font-size` property.
 
 ```html
-<span class="k-icon k-i-gear k-icon-24"></span>
+<span class="k-icon k-font-icon k-i-gear k-icon-24"></span>
 
 <style>
     .k-icon-24 {
@@ -116,8 +144,8 @@ For SVG icons, you can change the size with the `width` and `height` CSS propert
 To set the icon color, use the `color` CSS property.
 
 ```html
-<span class="k-icon k-i-gear" style="color: blue;"></span>
-<span class="k-icon k-i-gear colored-icon"></span>
+<span class="k-icon k-font-icon k-i-gear" style="color: blue;"></span>
+<span class="k-icon k-font-icon k-i-gear colored-icon"></span>
 
 <style>
     .colored-icon {
@@ -131,10 +159,10 @@ To set the icon color, use the `color` CSS property.
 To better accommodate an icon in your application, flip it by using the `k-flip-h` and `k-flip-v` predefined CSS classes.
 
 ```html
-<span class="k-icon k-i-pencil"></span>
-<span class="k-icon k-i-pencil k-flip-h"></span>
-<span class="k-icon k-i-pencil k-flip-v"></span>
-<span class="k-icon k-i-pencil k-flip-h k-flip-v"></span>
+<span class="k-icon k-font-icon k-i-pencil"></span>
+<span class="k-icon k-font-icon k-i-pencil k-flip-h"></span>
+<span class="k-icon k-font-icon k-i-pencil k-flip-v"></span>
+<span class="k-icon k-font-icon k-i-pencil k-flip-h k-flip-v"></span>
 ```
 
 You can also rotate the icon with the help of the following predefined CSS classes:
@@ -149,7 +177,7 @@ You can also rotate the icon with the help of the following predefined CSS class
 * `k-rotate-315`&mdash;Rotates an icon 315°.
 
 ```html
-<span class="k-icon k-i-pencil k-rotate-90"></span>
+<span class="k-icon k-font-icon k-i-pencil k-rotate-90"></span>
 ```
 
 ## Loading Indicator
@@ -157,9 +185,9 @@ You can also rotate the icon with the help of the following predefined CSS class
 To show a loading indicator, use the `k-i-loading` CSS class. You can adjust the size and color of the loading indicator in the same way you make adjustments to other icons.
 
 ```html
-<span class="k-icon k-i-loading"></span>
-<span class="k-icon k-i-loading" style="font-size: 64px;"></span>
-<span class="k-icon k-i-loading" style="color: limegreen;"></span>
+<span class="k-icon k-font-icon k-i-loading"></span>
+<span class="k-icon k-font-icon k-i-loading" style="font-size: 64px;"></span>
+<span class="k-icon k-font-icon k-i-loading" style="color: limegreen;"></span>
 ```
 
 ## List of Font Icons
diff --git a/docs/troubleshooting/csp.md b/docs/troubleshooting/csp.md
index 39e6f411..06f75a55 100644
--- a/docs/troubleshooting/csp.md
+++ b/docs/troubleshooting/csp.md
@@ -7,17 +7,26 @@ position: 20
 
 # Content Security Policy
 
-If a strict `Content-Security-Policy` (CSP) mode is enabled, some browser features are disabled, such as:
-* Inline JavaScript, such as `<script></script>` or DOM event attributes like `onclick`, are blocked. All script code must reside in separate files, served from a whitelisted domain.
-* Dynamic code evaluation via `eval()` and string arguments for both `setTimeout` and `setInterval` are blocked.
-* Fonts and images from Base64 `data:` portions in stylesheets.
+This article describes how the Kendo UI for Vue Native suite conforms to [`Content-Security-Policy` (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) and what policy configuration it may need.
 
-These limitations can affect the Kendo UI for Vue components, because they need the following:
+## Strict Content Security Policy(CSP) and What it Affects?
 
-* Allow `data:` sources for `font-src` to enable the loading of [font icons](slug:icons).
+In general, a strict CSP can disable web app features, such as:
+
+* Scripts, styles, and images from untrusted domains.
+* Inline JavaScript in `<script>` tags and legacy DOM attributes such as `onclick`.
+* Inline CSS in `<style>` tags and `style` attributes. 
+* Fonts and images that are embedded in stylesheets with `data:` URIs.
+* Dynamic code evaluation via `eval()`.
+
+## Policy Configuration
+
+The CSP limitations can affect the normal work of the Kendo UI for Vue components. To be sure everything works as expected, the following configurations should be applied:
+
+* Allow inline styles to use component parameters such as `width`, `height`, `top`, `left`, etc. 
 * Allow `'unsafe-inline'` for `style-src` to enable Kendo UI for Vue components to load encapsulated styles when:
     * Using the Editor in [iframe edit mode](slug:styling_editor#toc-styling-the-content-in-iframe-edit-mode)
-* If you use our CDN, you must also allow it as a source for stylesheets.
+* If you use the Kendo UI for Vue components through a CDN, allow `https://kendo.cdn.telerik.com` as a source for stylesheets.
 
 **Sample CSP rule that ensures the Kendo UI for Vue components function and look as expected**
 
@@ -25,6 +34,19 @@ These limitations can affect the Kendo UI for Vue components, because they need
 <meta http-equiv="Content-Security-Policy" content=" 
       style-src 'self' 'unsafe-inline' https://kendo.cdn.telerik.com; 
       style-src-elem 'self' 'unsafe-inline' https://kendo.cdn.telerik.com; 
-      font-src 'self' data:; 
       img-src 'self' data:">
 ```
+
+## Enhancements and Changes
+
+Since our `R3 2023` release, the font icons that where previously available out-of-the-box are now accessible through this CDN link. After the mentioned version, all icons used in the Kendo UI for Vue components are SVG ones. 
+
+If you are using a version of the Kendo UI for Vue Native components that is released before October 2023, your project is most probably using Font icons. If it is possible, we recommend updating the Vue components to the latest available versions of both the Kendo suite and its related Kendo Theme. 
+
+If an update is not possible, you need to add the following CSP configuration to be sure that everything will be working as expected: 
+
+```xml
+font-src 'self' data:; 
+```
+
+
