docs(icons): Clarify namespace usage (#1289)

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>

Author: github-actions[bot]

common-features/icons.md

@@ -30,12 +30,23 @@ This article contains the following sections:
 
 ## How Icons Work
 
-The Telerik Blazor components use built-in icons with the help of two NuGet packages. These are installed automatically as dependencies of the `Telerik.UI.for.Blazor` package. No manual actions are necessary. These icon packages are:
+The Telerik Blazor components use built-in icons with the help of two NuGet packages. They are installed *automatically* as dependencies of the `Telerik.UI.for.Blazor` package:
 
-* `Telerik.FontIcons` - defines the `FontIcon` `enum` for easier usage of built-in font icons
-* `Telerik.SvgIcons` - defines the `ISvgIcon` interface and the `SvgIcon` static class for built-in SVG icons
+* `Telerik.FontIcons` - defines the `FontIcon` `enum` for easier usage of built-in **font** icons
+* `Telerik.SvgIcons` - defines the `ISvgIcon` interface and the `SvgIcon` static class for built-in **SVG** icons
 
-Some components provide icon-related parameters, which can rely on the above packages too. For example:
+To use the icons, import one or both namespaces, for example in `_Imports.razor`:
+
+>caption Register Telerik Blazor icon namespaces
+
+<div class="skip-repl"></div>
+
+````CSHTML
+@using Telerik.FontIcons
+@using Telerik.SvgIcons
+````
+
+Some components provide icon-related parameters, which can rely on the above packages and namespaces too. For example:
 
 >caption Icon parameter in Telerik Blazor components
 

getting-started/client-blazor.md

@@ -63,12 +63,14 @@ To enable the Telerik UI for Blazor components, you must add several client-side
 **C#**
 @[template](/_contentTemplates/common/js-interop-file.md#register-telerik-service-client)
 
-5\. In the `~/_Imports.razor` file, add the `@using` directives below—this configures the project to recognize the Telerik components in all files.
+5\. In the `~/_Imports.razor` file, add the `@using` directives below. This configures the project to recognize the Telerik components in all files. You can register one or both icon namespaces, depending on the [icon type you will be using]({%slug general-information/font-icons%}).
 
 **_Imports.razor**
 
     @using Telerik.Blazor
     @using Telerik.Blazor.Components
+    @using Telerik.FontIcons
+    @using Telerik.SvgIcons
 
 
 6\. @[template](/_contentTemplates/common/get-started.md#root-component-telerik-layout)

getting-started/server-blazor.md

@@ -74,19 +74,20 @@ To enable the Telerik UI for Blazor components, you must add several client-side
 **C#**
 @[template](/_contentTemplates/common/js-interop-file.md#register-telerik-service-server)
 
-5\. In the `~/_Imports.razor` file, add the `@using` directives below—this configures the project to recognize the Telerik components in all files.
+5\. In the `~/_Imports.razor` file, add the `@using` directives below. This configures the project to recognize the Telerik components in all files. You can register one or both icon namespaces, depending on the [icon type you will be using]({%slug general-information/font-icons%}).
 
 **_Imports.razor**
 
     @using Telerik.Blazor
     @using Telerik.Blazor.Components
+    @using Telerik.FontIcons
+    @using Telerik.SvgIcons
+
 
 7\. @[template](/_contentTemplates/common/get-started.md#root-component-telerik-layout)
 
 8\. @[template](/_contentTemplates/common/get-started.md#root-component-main-layout)
 
-
-    
 Now your Blazor Server project can use the Telerik UI for Blazor components.
 
 ## Step 5: Add a Component to a View

getting-started/what-you-need.md

@@ -126,11 +126,17 @@ To use the Telerik components, you must add a few items to your projects. Some o
 
 ### Common Configuration
 
-You can set the project to recognize all Telerik components without explicit `@using` statements on every `.razor` file. To achieve this, add the following to your `~/_Imports.razor` file:
+You can set the project to recognize all Telerik components without explicit `@using` statements on every `.razor` file. To achieve this, add the following to your `~/_Imports.razor` file. You can register one or both icon namespaces, depending on the [icon type you will be using]({%slug general-information/font-icons%}).
+
+>caption _Imports.razor
+
+<div class="skip-repl"></div>
 
 ````CSHTML
 @using Telerik.Blazor
 @using Telerik.Blazor.Components
+@using Telerik.FontIcons
+@using Telerik.SvgIcons
 ````
 
 To enable the use of detached popups (for example, dropdown lists, menus, grid filters, etc.), you must add a `TelerikLayout.razor` component at the root level of the DOM:

hybrid-blazor-apps.md

@@ -52,11 +52,17 @@ You may add the Telerik resources as [static assets]({%slug getting-started/what
 
 ### 3. Include `@using` statements 
 
-You can set the project to recognize all Telerik components without explicit `@using `statements on every `.razor` file. To achieve this, add the following to your `~/_Imports.razor`file:
+You can set the project to recognize all Telerik components without explicit `@using `statements on every `.razor` file. To achieve this, add the following to your `~/_Imports.razor`file. You can register one or both icon namespaces, depending on the [icon type you will be using]({%slug general-information/font-icons%}).
 
-````
+>caption _Imports.razor
+
+<div class="skip-repl"></div>
+
+````CSHTML
 @using Telerik.Blazor
 @using Telerik.Blazor.Components
+@using Telerik.FontIcons
+@using Telerik.SvgIcons
 ````
 
 ### 4. Add the `TelerikRootComponent`
@@ -76,6 +82,8 @@ The final step is to register the Telerik services. Add the Telerik services in
 
 For example, in MAUI app, you register services in the `MauiProgram.cs`:
 
+<div class="skip-repl"></div>
+
 ````CSHTML
 namespace MyBlazorMauiAppName
 {