docs(icons): next chunk

svdimitr · jivanova · commit 89e6b31703ff · 2023-01-17T22:42:58.000+02:00
diff --git a/components/avatar/types.md b/components/avatar/types.md
@@ -41,7 +41,7 @@ If the `Type` parameter value is not matching the type of the content, you will
 
 <TelerikAvatar Type="AvatarType.Icon">
 
-    <TelerikIcon Icon=FontIcon.User></TelerikIcon>
+    <TelerikFontIcon Icon=FontIcon.User></TelerikIcon>
 
 </TelerikAvatar>
 ````
diff --git a/components/calendar/templates/month-cell.md b/components/calendar/templates/month-cell.md
@@ -25,7 +25,7 @@ The template receives the `DateTime` corresponding to its cell.
     <MonthCellTemplate>
         @if (IsSpecialDay(context))
         {
-            <TelerikIcon Icon="@("user")"></TelerikIcon>
+            <TelerikFontIcon Icon="@("user")"></TelerikIcon>
         }
         @context.Day
     </MonthCellTemplate>
diff --git a/components/dialog/header.md b/components/dialog/header.md
@@ -37,9 +37,9 @@ The following example demonstrates how to set up the title through a template. T
 
 <TelerikDialog @bind-Visible="@Visible" ShowCloseButton="false">
     <DialogTitle>
-        <TelerikIcon IconClass="k-icon k-i-caret-double-alt-up"></TelerikIcon>
+        <TelerikFontIcon IconClass="k-icon k-i-caret-double-alt-up"></TelerikIcon>
         <strong>@Title</strong>
-        <TelerikIcon IconClass="k-icon k-i-caret-double-alt-up"></TelerikIcon>
+        <TelerikFontIcon IconClass="k-icon k-i-caret-double-alt-up"></TelerikIcon>
     </DialogTitle>
     <DialogContent>
         A new version of <strong>Telerik UI for Blazor</strong> is available. Would you like to download and install it now?
diff --git a/components/gantt/gantt-tree/templates/column-header.md b/components/gantt/gantt-tree/templates/column-header.md
@@ -63,7 +63,7 @@ By default columns display the name of the corresponding field or their `Title`
                      Width="100px">
             <HeaderTemplate>
                 <span>
-                    <TelerikIcon Icon="image" />
+                    <TelerikFontIcon Icon="image" />
                     Column with Icon
                 </span>
             </HeaderTemplate>
diff --git a/components/gantt/timeline/templates/tooltip.md b/components/gantt/timeline/templates/tooltip.md
@@ -45,7 +45,7 @@ Apart from that, you can add and customize any other content - for example, icon
               OnDelete="@DeleteItem">
     <TooltipTemplate>
             <h5>@(((TooltipTemplateContext)context).Title)</h5>        
-            <TelerikIcon Class="status" Icon="rotate"></TelerikIcon>
+            <TelerikFontIcon Class="status" Icon="rotate"></TelerikIcon>
             @(((TooltipTemplateContext)context).DataAttributes["percent"])% Completed                
         <br />
     </TooltipTemplate>
diff --git a/components/grid/columns/command.md b/components/grid/columns/command.md
@@ -107,7 +107,7 @@ The following code example demonstrates declarations and handling.
             <GridCommandButton Command="Edit" Icon=FontIcon.Pencil>Edit</GridCommandButton>
             <GridCommandButton Command="Save" Icon=FontIcon.Save ShowInEdit="true" OnClick="@CustomSaveOnClickHandler">Update</GridCommandButton>
             <GridCommandButton Command="Cancel" Icon=FontIcon.Cancel ShowInEdit="true">Cancel</GridCommandButton>
-            <GridCommandButton Command="MyOwnCommand" Icon="information" ShowInEdit="false" OnClick="@MyCustomCommandOnClickHandler">My Command</GridCommandButton>
+            <GridCommandButton Command="MyOwnCommand" Icon=FontIcon.InfoCircle ShowInEdit="false" OnClick="@MyCustomCommandOnClickHandler">My Command</GridCommandButton>
         </GridCommandColumn>
     </GridColumns>
 </TelerikGrid>
diff --git a/components/grid/columns/frozen.md b/components/grid/columns/frozen.md
@@ -43,7 +43,7 @@ This article you can observe Freezing different columns. The examples are separa
         <GridColumn Field=@nameof(Product.Discontinued) Title="Discontinued" Width="150px" />
         <GridCommandColumn Width="250px" Locked="true">
             <GridCommandButton Command="CustomCommand"
-                               Icon="information"
+                               Icon=FontIcon.InfoCircle
                                OnClick="@((GridCommandEventArgs  e) => Result = $" click from {(e.Item as Product).ProductName}" )">
                 Information
             </GridCommandButton>
diff --git a/components/grid/templates/column-header.md b/components/grid/templates/column-header.md
@@ -53,7 +53,7 @@ Bound columns render the name of the field or their `Title` in their header. Thr
         <GridColumn>
             <HeaderTemplate>
                 <span>
-                    <TelerikIcon Icon="image" />
+                    <TelerikFontIcon Icon="image" />
                     Column with Icon
                 </span>
             </HeaderTemplate>
diff --git a/components/grid/templates/column.md b/components/grid/templates/column.md
@@ -61,7 +61,7 @@ The example below shows how to:
                 <TelerikCheckBox @bind-Value="@item.Organic" Enabled="false" />
                 <br />
                 or Icon:
-                <TelerikIcon Icon="@( item.Organic ? "checkbox-checked" : "checkbox" )" />
+                <TelerikFontIcon Icon="@( item.Organic ? "checkbox-checked" : "checkbox" )" />
             </Template>
         </GridColumn>
     </GridColumns>
diff --git a/components/grid/toolbar.md b/components/grid/toolbar.md
@@ -166,7 +166,7 @@ You can use the toolbar to add buttons that invoke actions specific to your appl
 
 <TelerikGrid Data=@MyData Pageable="true" PageSize="15">
 	<GridToolBarTemplate>
-		<GridCommandButton Command="MyToolbarCommand" OnClick="@MyCommandFromToolbar" Icon="info">Fire My Command</GridCommandButton>
+		<GridCommandButton Command="MyToolbarCommand" OnClick="@MyCommandFromToolbar" Icon=FontIcon.InfoCircle>Fire My Command</GridCommandButton>
 	</GridToolBarTemplate>
 	<GridColumns>
 		<GridColumn Field=@nameof(SampleData.Name) Title="Employee Name" />
diff --git a/components/loadercontainer/template.md b/components/loadercontainer/template.md
@@ -29,7 +29,7 @@ This example shows how to change the contents of the loading text and animation
     <Template>
         <TelerikLoader></TelerikLoader>
         <div>
-            <span><TelerikIcon Icon="information"></TelerikIcon></span>
+            <span><TelerikFontIcon Icon=FontIcon.InfoCircle></TelerikIcon></span>
             <span>Please wait, the application is loading...</span>
         </div>
     </Template>
@@ -95,7 +95,7 @@ You can use CSS to target the DOM elements that create the Panel around the temp
     <Template>
         <TelerikLoader ThemeColor="light"></TelerikLoader>
         <div>
-            <span><TelerikIcon Icon="information"></TelerikIcon></span>
+            <span><TelerikFontIcon Icon=FontIcon.InfoCircle></TelerikIcon></span>
             <span style="color:white">Loading...</span>
         </div>
     </Template>
diff --git a/components/multicolumncombobox/columns/templates.md b/components/multicolumncombobox/columns/templates.md
@@ -38,7 +38,7 @@ The `HeaderTemplate` allows you to control the rendering of the column's header.
         </MultiColumnComboBoxColumn>
         <MultiColumnComboBoxColumn Field="@nameof(SampleData.Name)">
             <HeaderTemplate>
-                <TelerikIcon Icon="star-outline"></TelerikIcon>
+                <TelerikFontIcon Icon="star-outline"></TelerikIcon>
                 Employee Name
             </HeaderTemplate>
         </MultiColumnComboBoxColumn>
diff --git a/components/multicolumncombobox/templates.md b/components/multicolumncombobox/templates.md
@@ -74,7 +74,7 @@ You can access the `context` object and cast it to the bound model to employ som
     </FooterTemplate>
     <NoDataTemplate>
         <div class="no-data-template">
-            <TelerikIcon Class="k-icon k-icon-lg" Icon="files-error"></TelerikIcon>
+            <TelerikFontIcon Class="k-icon k-icon-lg" Icon="files-error"></TelerikIcon>
             <p>No items available</p>
         </div>
     </NoDataTemplate>
diff --git a/components/multiselect/templates.md b/components/multiselect/templates.md
@@ -60,7 +60,7 @@ The MultiSelect component allows you to change what is rendered in its items, he
     </FooterTemplate>
     <NoDataTemplate>
         <div class="no-data-template">
-            <TelerikIcon Class="k-icon k-icon-lg" Icon="files-error"></TelerikIcon>
+            <TelerikFontIcon Class="k-icon k-icon-lg" Icon="files-error"></TelerikIcon>
             <p>No items available</p>
         </div>
     </NoDataTemplate>
diff --git a/components/scheduler/templates/appointment.md b/components/scheduler/templates/appointment.md
@@ -38,7 +38,7 @@ You can also style the entire appointments by adding a class to their wrapping e
                 var appointment = context as SchedulerAppointment;
                 @if (!string.IsNullOrEmpty(appointment.Icon))
                 {
-                    <TelerikIcon Icon="@appointment.Icon" />
+                    <TelerikFontIcon Icon="@appointment.Icon" />
                 }
                 <strong>@appointment.Title</strong>
                 // sample logic that determines if the appointment is large enough to accommodate more text
diff --git a/components/scheduler/templates/slot.md b/components/scheduler/templates/slot.md
@@ -66,7 +66,7 @@ The `context` of the template is a `SchedulerSlotTemplateContext` object that co
                 @if (context.Start.TimeOfDay >= ControlDate.TimeOfDay
                 && context.End.AddSeconds(-1).TimeOfDay <= ControlDate.AddHours(1).TimeOfDay)
                 {
-                    <div style="color: green;"><TelerikIcon Icon="pause"></TelerikIcon>Lunch Break</div>
+                    <div style="color: green;"><TelerikFontIcon Icon="pause"></TelerikIcon>Lunch Break</div>
                 }
             </SlotTemplate>
             <AllDaySlotTemplate>
@@ -81,7 +81,7 @@ The `context` of the template is a `SchedulerSlotTemplateContext` object that co
                 @if (context.Start.TimeOfDay >= ControlDate.TimeOfDay
                 && context.End.AddSeconds(-1).TimeOfDay <= ControlDate.AddHours(1).TimeOfDay)
                 {
-                    <div style="color: green;"><TelerikIcon Icon="pause"></TelerikIcon>Lunch Break</div>
+                    <div style="color: green;"><TelerikFontIcon Icon="pause"></TelerikIcon>Lunch Break</div>
                 }
             </SlotTemplate>
             <AllDaySlotTemplate>
diff --git a/components/stockchart/tooltip/overview.md b/components/stockchart/tooltip/overview.md
@@ -446,7 +446,7 @@ The available series data point information in the `context` is:
                           LowField="@nameof(StockDataPoint.Low)">
             <StockChartSeriesTooltip Visible="true">
                 <Template>
-                    <TelerikIcon Icon="information" />
+                    <TelerikFontIcon Icon=FontIcon.InfoCircle />
                     The high value for @context.SeriesName is @(((context.DataItem as StockDataPoint).High).ToString("C2"))
                 </Template>
             </StockChartSeriesTooltip>
diff --git a/components/stockchart/tooltip/shared.md b/components/stockchart/tooltip/shared.md
@@ -192,7 +192,7 @@ Each `Point` contains the following data:
                 foreach (var point in points)
                 {
                     <div>
-                        <TelerikIcon Icon="information" />
+                        <TelerikFontIcon Icon=FontIcon.InfoCircle />
                         <strong>Product name: @point.SeriesName</strong> has
                         High value: @(((point.DataItem as StockDataPoint).High).ToString("C2"))
                     </div>
diff --git a/components/tabstrip/header-template.md b/components/tabstrip/header-template.md
@@ -31,7 +31,7 @@ You can define the `HeaderTemplate` with the following configuration in the `Tab
 <TelerikTabStrip>
     <TabStripTab>
         <HeaderTemplate>            
-            <TelerikIcon Icon="email" />
+            <TelerikFontIcon Icon="email" />
             <strong>Icon and text</strong>
         </HeaderTemplate>
         <Content>            
@@ -40,7 +40,7 @@ You can define the `HeaderTemplate` with the following configuration in the `Tab
     </TabStripTab>
     <TabStripTab Title="History">        
         <HeaderTemplate>
-            <TelerikIcon Icon="clock" />
+            <TelerikFontIcon Icon="clock" />
             <strong>Icon and text 2</strong>
         </HeaderTemplate>
         <Content>
diff --git a/components/tooltip/overview.md b/components/tooltip/overview.md
@@ -33,7 +33,7 @@ The Tooltip will automatically display the value of `title` and `alt` attributes
     ... and the question mark:
 
     <span title="I am a Telerik Blazor Tooltip." class="tooltip-target">
-        <TelerikIcon Icon="question-circle" />
+        <TelerikFontIcon Icon="question-circle" />
     </span>
 </div>
 ````
diff --git a/components/treelist/templates/column-header.md b/components/treelist/templates/column-header.md
@@ -47,7 +47,7 @@ Bound columns render the name of the field or their `Title` in their header. Thr
         <TreeListColumn>
             <HeaderTemplate>
                 <span class="k-display-flex k-align-items-center">
-                    <TelerikIcon Icon="image" />
+                    <TelerikFontIcon Icon="image" />
                     With Icon
                 </span>
             </HeaderTemplate>
diff --git a/components/treelist/toolbar.md b/components/treelist/toolbar.md
@@ -43,7 +43,7 @@ You can use the toolbar to add buttons that invoke actions specific to your appl
 <TelerikTreeList Data="@Data" Pageable="true" ItemsField="@(nameof(Employee.DirectReports))" Width="850px">
 
     <TreeListToolBarTemplate>
-        <TreeListCommandButton Command="MyToolbarCommand" OnClick="@MyCommandFromToolbar" Icon="info">Fire My Command</TreeListCommandButton>
+        <TreeListCommandButton Command="MyToolbarCommand" OnClick="@MyCommandFromToolbar" Icon=FontIcon.InfoCircle>Fire My Command</TreeListCommandButton>
     </TreeListToolBarTemplate>
 
     <TreeListColumns>
diff --git a/components/treeview/checkboxes/multiple.md b/components/treeview/checkboxes/multiple.md
@@ -62,7 +62,7 @@ You can use one-way binding to provide an initial node selection, and respond to
                 var checkedItem = item as TreeItem;
                 <li>
                     <span>
-                        <TelerikIcon Icon="@checkedItem.Icon"></TelerikIcon>
+                        <TelerikFontIcon Icon="@checkedItem.Icon"></TelerikIcon>
                     </span>
                     <span>
                         @(checkedItem.Text)
@@ -199,7 +199,7 @@ You can use two-way binding to get the node the user has selected. This can be u
                 var checkedItem = item as TreeItem;
                 <li>
                     <span>
-                        <TelerikIcon Icon="@checkedItem.Icon"></TelerikIcon>
+                        <TelerikFontIcon Icon="@checkedItem.Icon"></TelerikIcon>
                     </span>
                     <span>
                         @(checkedItem.Text)
diff --git a/components/treeview/checkboxes/overview.md b/components/treeview/checkboxes/overview.md
@@ -61,7 +61,7 @@ You get or set the checked nodes through the `CheckedItems` parameter of the tre
                 var checkedItem = item as TreeItem;
                 <li>
                     <span>
-                        <TelerikIcon Icon="@checkedItem.Icon"></TelerikIcon>
+                        <TelerikFontIcon Icon="@checkedItem.Icon"></TelerikIcon>
                     </span>
                     <span>
                         @(checkedItem.Text)
@@ -199,7 +199,7 @@ Setting the `CheckChildren` boolean parameter to `true` will allow the user to s
                 var checkedItem = item as TreeItem;
                 <li>
                     <span>
-                        <TelerikIcon Icon="@checkedItem.Icon"></TelerikIcon>
+                        <TelerikFontIcon Icon="@checkedItem.Icon"></TelerikIcon>
                     </span>
                     <span>
                         @(checkedItem.Text)
@@ -340,7 +340,7 @@ Setting the `CheckParents` boolean parameter to `true` will have the following b
                 var checkedItem = item as TreeItem;
                 <li>
                     <span>
-                        <TelerikIcon Icon="@checkedItem.Icon"></TelerikIcon>
+                        <TelerikFontIcon Icon="@checkedItem.Icon"></TelerikIcon>
                     </span>
                     <span>
                         @(checkedItem.Text)
@@ -472,7 +472,7 @@ You can allow the user to click on the node itself and the TreeView will automat
                 var checkedItem = item as TreeItem;
                 <li>
                     <span>
-                        <TelerikIcon Icon="@checkedItem.Icon"></TelerikIcon>
+                        <TelerikFontIcon Icon="@checkedItem.Icon"></TelerikIcon>
                     </span>
                     <span>
                         @(checkedItem.Text)
diff --git a/components/treeview/selection/multiple.md b/components/treeview/selection/multiple.md
@@ -63,7 +63,7 @@ You can use one-way binding to provide an initial node selection, and respond to
     foreach (var item in SelectedItems)
     {
         <div class="card" style="width: 15rem">
-            <span><strong>Icon:</strong> <TelerikIcon Icon="@((item as TreeItem).Icon)" /></span>
+            <span><strong>Icon:</strong> <TelerikFontIcon Icon="@((item as TreeItem).Icon)" /></span>
             <span><strong>Title:</strong> @((item as TreeItem).Text)</span>
             <span><strong>Id:</strong> @((item as TreeItem).Id) </span>
         </div>
@@ -192,7 +192,7 @@ You can use two-way binding to get the node the user has selected. This can be u
     foreach (var item in SelectedItems)
     {
         <div class="card" style="width: 15rem">
-            <span><strong>Icon:</strong> <TelerikIcon Icon="@((item as TreeItem).Icon)" /></span>
+            <span><strong>Icon:</strong> <TelerikFontIcon Icon="@((item as TreeItem).Icon)" /></span>
             <span><strong>Title:</strong> @((item as TreeItem).Text)</span>
             <span><strong>Id:</strong> @((item as TreeItem).Id) </span>
         </div>
diff --git a/components/treeview/selection/overview.md b/components/treeview/selection/overview.md
@@ -36,7 +36,7 @@ If you want to extract details for the selection from `SelectedItems`, you need
 {
     TreeItem selectedItem = SelectedItems.FirstOrDefault() as TreeItem;
     <div>
-        Selected item: <strong> <TelerikIcon Icon="@selectedItem.Icon" /> @selectedItem.Text</strong>
+        Selected item: <strong> <TelerikFontIcon Icon="@selectedItem.Icon" /> @selectedItem.Text</strong>
     </div>
 }
 
diff --git a/components/treeview/selection/single.md b/components/treeview/selection/single.md
@@ -54,7 +54,7 @@ You can use one-way binding to provide an initial node selection, and respond to
     <div>
         <strong>Selected item:</strong>
         <div class="card" style="width: 15rem">
-            <span><strong>Icon:</strong> <TelerikIcon Icon="@selectedItem.Icon" /></span>
+            <span><strong>Icon:</strong> <TelerikFontIcon Icon="@selectedItem.Icon" /></span>
             <span><strong>Title:</strong> @selectedItem.Text</span>
             <span><strong>Id:</strong> @selectedItem.Id </span>
         </div>
@@ -179,7 +179,7 @@ You can use two-way binding to get the node the user has selected. This can be u
     <div>
         <strong>Selected item:</strong>
         <div class="card" style="width: 15rem">
-            <span><strong>Icon:</strong> <TelerikIcon Icon="@selectedItem.Icon" /></span>
+            <span><strong>Icon:</strong> <TelerikFontIcon Icon="@selectedItem.Icon" /></span>
             <span><strong>Title:</strong> @selectedItem.Text</span>
             <span><strong>Id:</strong> @selectedItem.Id </span>
         </div>
diff --git a/components/validation/message.md b/components/validation/message.md
@@ -141,7 +141,7 @@ The `TelerikValidationMessage` allows you to control its rendering via a nested
                     @foreach (string message in validationMessages)
                     {
                         <div>
-                            <TelerikIcon Icon="x-outline"></TelerikIcon>
+                            <TelerikFontIcon Icon="x-outline"></TelerikIcon>
                             <span class="custom-validation-message">@message</span>
                         </div>
                     }
diff --git a/components/validation/summary.md b/components/validation/summary.md
@@ -111,7 +111,7 @@ The `TelerikValidationSummary` allows you to control its rendering via a nested
                     @foreach (var message in validationSummaryContext)
                     {
                         <div>
-                            <TelerikIcon Icon="x-outline" />
+                            <TelerikFontIcon Icon="x-outline" />
                             <span>@message</span>
                         </div>
                     }
diff --git a/components/validation/tooltip.md b/components/validation/tooltip.md
@@ -182,7 +182,7 @@ The `ValidationTooltip` allows you to control its rendering via a nested `<Templ
                     @foreach (var message in validationContext)
                     {
                         <div>
-                            <TelerikIcon Icon="x-outline"></TelerikIcon>
+                            <TelerikFontIcon Icon="x-outline"></TelerikIcon>
                             <span>@message</span>
                         </div>
                     }
diff --git a/components/window/actions.md b/components/window/actions.md
@@ -110,7 +110,7 @@ You can mix custom actions with built-in actions, and you do not have to define
 <TelerikWindow Visible="true">
     <WindowActions>
         <WindowAction Name="Minimize" />
-        <WindowAction Name="MyAction" Icon="information" OnClick="@MyCustomActionHandler" />
+        <WindowAction Name="MyAction" Icon=FontIcon.InfoCircle OnClick="@MyCustomActionHandler" />
         <WindowAction Name="Maximize" />
         <WindowAction Hidden="@( string.IsNullOrEmpty(result) )"
                       Icon="clear-css"
diff --git a/knowledge-base/button-change-icons-position.md b/knowledge-base/button-change-icons-position.md
@@ -36,8 +36,8 @@ You can change the [icons]({%slug general-information/font-icons%}) position and
 ````CSHTML
 @*This button has two icons, one on the left and one on the right side of the text*@
 <TelerikButton>
-    <TelerikIcon Icon="check-outline" />
+    <TelerikFontIcon Icon="check-outline" />
     Check it
-    <TelerikIcon Icon="check-outline" />
+    <TelerikFontIcon Icon="check-outline" />
 </TelerikButton>
 ````
diff --git a/knowledge-base/textbox-add-icon.md b/knowledge-base/textbox-add-icon.md

Original file line number	Diff line number	Diff line change
@@ -25,7 +25,7 @@ The template receives the `DateTime` corresponding to its cell.
`25`	`25`	`<MonthCellTemplate>`
`26`	`26`	`@if (IsSpecialDay(context))`
`27`	`27`	`{`
`28`		`- <TelerikIcon Icon="@("user")"></TelerikIcon>`
	`28`	`+ <TelerikFontIcon Icon="@("user")"></TelerikIcon>`
`29`	`29`	`}`
`30`	`30`	`@context.Day`
`31`	`31`	`</MonthCellTemplate>`