docs(icons): chunk of files

Author: svdimitr

_contentTemplates/grid/export.md

@@ -26,8 +26,8 @@
 
         <TelerikGrid Data="@GridData" AutoGenerateColumns="true" Pageable="true">
             <GridToolBarTemplate>
-                <GridCommandButton OnClick="@ShowLoadingSign" Command="ExcelExport" Icon="file-excel">Export to Excel</GridCommandButton>
-                <GridCommandButton OnClick="@ShowLoadingSign" Command="CsvExport" Icon="file-csv">Export to CSV</GridCommandButton>
+                <GridCommandButton OnClick="@ShowLoadingSign" Command="ExcelExport" Icon=FontIcon.FileExcel>Export to Excel</GridCommandButton>
+                <GridCommandButton OnClick="@ShowLoadingSign" Command="CsvExport" Icon=FontIcon.FileCsv>Export to CSV</GridCommandButton>
             </GridToolBarTemplate>
             <GridExport>
                 <GridExcelExport AllPages="true" FileName="telerik-grid-export" />

common-features/loading-sign.md

@@ -98,7 +98,7 @@ This sample shows only an indicator for the initial data load, only the DELETE o
                  OnDelete="@DeleteHandlerWithDelay">
         <GridColumns>
             <GridCommandColumn>
-                <GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
+                <GridCommandButton Command="Delete" Icon=FontIcon.Trash>Delete</GridCommandButton>
             </GridCommandColumn>
         </GridColumns>
     </TelerikGrid>

components/autocomplete/templates.md

@@ -60,7 +60,7 @@ The AutoComplete component allows you to change what is rendered in its items, h
     </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=FontIcon.FilesError></TelerikFontIcon>
             <p>No items available</p>
         </div>
     </NoDataTemplate>

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="user"></TelerikIcon>
+    <TelerikIcon Icon="FontIcon.User"></TelerikIcon>
 
 </TelerikAvatar>
 ````

components/breadcrumb/separator.md

@@ -12,7 +12,7 @@ position: 15
 
 The Breadcrumb component renders a [Telerik font icon]({%slug general-information/font-icons%}) as a separator between its items. By default the separator icon is `chevron-right`.
 
-You can define a separator icon of your choice through the `SeparatorIcon` attribute of the `TelerikBreadcrumb`. It accepts a `string` with the [Telerik icon]({%slug general-information/font-icons%}) name.
+You can define a separator icon of your choice through the `SeparatorIcon` attribute of the `TelerikBreadcrumb`. It accepts an `object` with the [Telerik icon]({%slug general-information/font-icons%}) name.
 
 Furthermore, you can take full control over the Separator rendering with the [SeparatorTemplate]({%slug breadcrumb-templates%}#separatortemplate) the Breadcrumb component provides.
 
@@ -23,7 +23,7 @@ Furthermore, you can take full control over the Separator rendering with the [Se
 ````CSHTML
 @* This example demonstrates how to change the default Telerik icon used as a Breadcrumb Separator*@
 
-<TelerikBreadcrumb SeparatorIcon="caret-double-alt-right"
+<TelerikBreadcrumb SeparatorIcon="FontIcon.CaretDoubleAltRight"
                    Data="@Items">
 </TelerikBreadcrumb>
 

components/calendar/templates/decade-cell.md

@@ -25,7 +25,7 @@ The template receives the `DateTime` corresponding to its cell.
     <DecadeCellTemplate>
         @if (yearsWithEvents.Contains(context.Year))
         {
-            <TelerikIcon Icon="warning"></TelerikIcon>
+            <TelerikFontIcon Icon="FontIcon.ExclamationCircle"></TelerikFontIcon>
         }
         @context.Year
     </DecadeCellTemplate>

components/calendar/templates/header-template.md

@@ -20,11 +20,11 @@ The example below is using a [Calendar reference and methods]({%slug components/
 <TelerikCalendar @bind-Value="@CalendarValue" @bind-Date="@CalendarDate">
     <HeaderTemplate>
 
-        <TelerikButton OnClick="@GoToPrevious" Icon="arrow-60-left" Title="Go to Previous Month"></TelerikButton>
+        <TelerikButton OnClick="@GoToPrevious" Icon="FontIcon.ArrowLeft" Title="Go to Previous Month"></TelerikButton>
         <TelerikButton OnClick="@SelectToday">Today</TelerikButton>
-        <TelerikButton OnClick="@GoToNext" Icon="arrow-60-right" Title="Go to Next Month"></TelerikButton>
+        <TelerikButton OnClick="@GoToNext" Icon="FontIcon.ArrowRight" Title="Go to Next Month"></TelerikButton>
 
-        <TelerikIcon Icon="parameter-date-time" /> @CalendarValue.ToShortDateString()
+        <TelerikFontIcon Icon="FontIcon.ParameterDateTime" /> @CalendarValue.ToShortDateString()
 
     </HeaderTemplate>
 </TelerikCalendar>

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>
+            <TelerikIcon Icon="@("user")"></TelerikIcon>
         }
         @context.Day
     </MonthCellTemplate>

components/calendar/templates/year-cell.md

@@ -25,7 +25,7 @@ The template receives the `DateTime` corresponding to its cell.
     <YearCellTemplate>
         @if (monthsWithEvents.Contains(context.Month))
         {
-            <TelerikIcon Icon="round-corners"></TelerikIcon>
+            <TelerikFontIcon Icon="FontIcon.RoundCorners"></TelerikFontIcon>
         }
         @context.ToString("MMM")
     </YearCellTemplate>

components/card/image.md

@@ -24,13 +24,13 @@ Every Blazor Card can have a dedicated area to render a card image that will fil
         <CardTitle>Bulgarian Mountains</CardTitle>
         <CardSubTitle>Bulgaria, Europe</CardSubTitle>
     </CardHeader>
-    
+
     <CardImage Src="https://docs.telerik.com/blazor-ui/components/card/images/rila_lakes.jpg"></CardImage>
-    
+
     <CardActions Layout="CardActionsLayout.Stretch">
-        <TelerikButton Class="k-flat" Icon="heart-outline" Title="Like"></TelerikButton>
-        <TelerikButton Class="k-flat" Icon="comment" Title="Comment"></TelerikButton>
-        <TelerikButton Class="k-flat" Icon="share" Title="Share"></TelerikButton>
+        <TelerikButton Class="k-flat" Icon="FontIcon.HeartOutline" Title="Like"></TelerikButton>
+        <TelerikButton Class="k-flat" Icon="SvgIcon.Comment" Title="Comment"></TelerikButton>
+        <TelerikButton Class="k-flat" Icon="SvgIcon.Share" Title="Share"></TelerikButton>
     </CardActions>
 </TelerikCard>
 ````