docs(icons): icons chunk

svdimitr · jivanova · commit 4774197dd638 · 2023-01-17T22:42:58.000+02:00
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>
-                <TelerikFontIcon Icon="star-outline"></TelerikIcon>
+                <TelerikFontIcon Icon=FontIcon.StarOutline></TelerikIcon>
                 Employee Name
             </HeaderTemplate>
         </MultiColumnComboBoxColumn>
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;"><TelerikFontIcon Icon="pause"></TelerikIcon>Lunch Break</div>
+                    <div style="color: green;"><TelerikFontIcon Icon=FontIcon.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;"><TelerikFontIcon Icon="pause"></TelerikIcon>Lunch Break</div>
+                    <div style="color: green;"><TelerikFontIcon Icon=FontIcon.Pause></TelerikIcon>Lunch Break</div>
                 }
             </SlotTemplate>
             <AllDaySlotTemplate>
diff --git a/components/toolbar/events.md b/components/toolbar/events.md
@@ -27,7 +27,7 @@ The `OnClick` event fires when the user clicks on a button in the ToolBar (also
 @*When clicking on the button a message will be printed in your console*@
 
 <TelerikToolBar>
-    <ToolBarButton Icon="hyperlink-email" OnClick="@OnHyperlinkClick">Hyperlink</ToolBarButton>
+    <ToolBarButton Icon=FontIcon.EnvelopLink OnClick="@OnHyperlinkClick">Hyperlink</ToolBarButton>
 </TelerikToolBar>
 
 
diff --git a/components/toolbar/overview.md b/components/toolbar/overview.md
@@ -115,15 +115,15 @@ The Blazor Toolbar has an option for adaptiveness. This option allows you to hid
         <ToolBarButton Icon=FontIcon.Redo>Redo</ToolBarButton>
         <ToolBarButton Icon=FontIcon.Image Overflow="ToolBarItemOverflow.Always">Image</ToolBarButton>
         <ToolBarSeparator></ToolBarSeparator>
-        <ToolBarToggleButton Icon="apply-format"></ToolBarToggleButton>
+        <ToolBarToggleButton Icon=FontIcon.ApplyFormat></ToolBarToggleButton>
         <ToolBarSeparator></ToolBarSeparator>
-        <ToolBarButton Icon="copy" Overflow="ToolBarItemOverflow.Never">Copy</ToolBarButton>
+        <ToolBarButton Icon=FontIcon.Copy Overflow="ToolBarItemOverflow.Never">Copy</ToolBarButton>
         <ToolBarButton Icon="paste" Overflow="ToolBarItemOverflow.Never">Paste</ToolBarButton>
         <ToolBarSeparator></ToolBarSeparator>
     <ToolBarButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single">
-        <ToolBarToggleButton Icon="align-left" OverflowText="Left"></ToolBarToggleButton>
-        <ToolBarToggleButton Icon="align-center" OverflowText="Center"></ToolBarToggleButton>
-        <ToolBarToggleButton Icon="align-right" OverflowText="Right"></ToolBarToggleButton>
+        <ToolBarToggleButton Icon=FontIcon.AlignLeft OverflowText="Left"></ToolBarToggleButton>
+        <ToolBarToggleButton Icon=FontIcon.AlignCenter OverflowText="Center"></ToolBarToggleButton>
+        <ToolBarToggleButton Icon=FontIcon.AlignRight OverflowText="Right"></ToolBarToggleButton>
     </ToolBarButtonGroup>
     </TelerikToolBar>
 </div>
diff --git a/components/toolbar/separators.md b/components/toolbar/separators.md
@@ -30,7 +30,7 @@ You can visually separate the items in the Telerik ToolBar for Blazor. Depending
     <ToolBarButtonGroup>
         <ToolBarButton Icon=FontIcon.Bold>Bold</ToolBarButton>
         <ToolBarButton Icon=FontIcon.Italic>Italic</ToolBarButton>
-        <ToolBarButton Icon="underline">Underline</ToolBarButton>
+        <ToolBarButton Icon=FontIcon.Underline>Underline</ToolBarButton>
     </ToolBarButtonGroup>
     <ToolBarSpacer />
     <ToolBarToggleButton @bind-Selected="@Selected">Toggle Button</ToolBarToggleButton>
diff --git a/components/toolbar/templated-item.md b/components/toolbar/templated-item.md
@@ -27,7 +27,7 @@ You cannot add those Templated items to a `ToolBarButtonGroup`.
     <ToolBarButtonGroup>
         <ToolBarButton Icon=FontIcon.Bold>Bold</ToolBarButton>
         <ToolBarButton Icon=FontIcon.Italic>Italic</ToolBarButton>
-        <ToolBarButton Icon="underline">Underline</ToolBarButton>
+        <ToolBarButton Icon=FontIcon.Underline>Underline</ToolBarButton>
     </ToolBarButtonGroup>
     <ToolBarSeparator />
 
diff --git a/components/tooltip/overview.md b/components/tooltip/overview.md
@@ -28,12 +28,12 @@ The Tooltip will automatically display the value of `title` and `alt` attributes
 <div style="padding: 5em;">
     Hover the button ...
 
-    <TelerikButton Icon="eye" Title="Hello world!" Class="tooltip-target" />
+    <TelerikButton Icon=FontIcon.Eye Title="Hello world!" Class="tooltip-target" />
 
     ... and the question mark:
 
     <span title="I am a Telerik Blazor Tooltip." class="tooltip-target">
-        <TelerikFontIcon Icon="question-circle" />
+        <TelerikFontIcon Icon=FontIcon.QuestionCircle />
     </span>
 </div>
 ````
diff --git a/components/treeview/events.md b/components/treeview/events.md
@@ -103,7 +103,7 @@ The `SelectedItemsChanged` event fires when the [selection]({%slug treeview-sele
     <div>
                 <span>Console</span>
                 <span>
-                    <TelerikButton OnClick="@OnClearClick" Icon="clear">Clear</TelerikButton>
+                    <TelerikButton OnClick="@OnClearClick" Icon=FontIcon.X>Clear</TelerikButton>
                 </span>
                 <div>
                     @(new MarkupString(EventLog))
diff --git a/components/window/actions.md b/components/window/actions.md
@@ -113,7 +113,7 @@ You can mix custom actions with built-in actions, and you do not have to define
         <WindowAction Name="MyAction" Icon=FontIcon.InfoCircle OnClick="@MyCustomActionHandler" />
         <WindowAction Name="Maximize" />
         <WindowAction Hidden="@( string.IsNullOrEmpty(result) )"
-                      Icon="clear-css"
+                      Icon=FontIcon.ClearCss
                       Name="CustomActionWithAllParameters"
                       Title="my custom title attribute that is a tooltip when you hover the action"
                       OnClick="@( () => result = string.Empty )" />
diff --git a/components/wizard/overview.md b/components/wizard/overview.md
@@ -31,7 +31,7 @@ The Wizard uses a [Stepper component]({%slug stepper-overview%}) internally, so
                 <p>Welcome to the Wizard!</p>
             </Content>
         </WizardStep>
-        <WizardStep Label="Survey" Icon="pencil">
+        <WizardStep Label="Survey" Icon=FontIcon.Pencil>
             <Content>
                 <p>The user is performing some actions...</p>
             </Content>
diff --git a/components/wizard/structure/content.md b/components/wizard/structure/content.md
@@ -20,21 +20,21 @@ The `Content` of the Wizard is a `ChildContent` of the `WizardStep`. While it is
 <div style="text-align:center" >
     <TelerikWizard Width="600px" Height="300px">
         <WizardSteps>
-            <WizardStep Label="Destination" Icon="map-marker">
+            <WizardStep Label="Destination" Icon=FontIcon.MapMarker>
                 <Content>
                     <TelerikDropDownList @bind-Value="@SelectedCity"
                                          Data="@Cities" DefaultText="Select City">
                     </TelerikDropDownList>
                 </Content>
             </WizardStep>
-            <WizardStep Label="Dates" Icon="calendar">
+            <WizardStep Label="Dates" Icon=FontIcon.Calendar>
                 <Content>
                         <TelerikDateRangePicker @bind-StartValue="@StartValue"
                                                 @bind-EndValue="@EndValue">
                         </TelerikDateRangePicker>
                 </Content>
             </WizardStep>
-            <WizardStep Label="Avalable flights" Icon="globe-outline">
+            <WizardStep Label="Avalable flights" Icon=FontIcon.GlobeOutline>
                 <Content>
                     <div>
                         Checking if we can take you to <strong>@SelectedCity</strong> between <strong>@StartValue</strong> and <strong>@EndValue</strong>.
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>
-    <TelerikFontIcon Icon="check-outline" />
+    <TelerikFontIcon Icon=FontIcon.CheckOutline />
     Check it
-    <TelerikFontIcon Icon="check-outline" />
+    <TelerikFontIcon Icon=FontIcon.CheckOutline />
 </TelerikButton>
 ````
diff --git a/knowledge-base/card-icon-buttons-too-large.md b/knowledge-base/card-icon-buttons-too-large.md
@@ -71,8 +71,8 @@ There are two ways to prevent icon button expansion:
         <CardSubTitle>Custom CardActions Class</CardSubTitle>
     </CardHeader>
     <CardActions Orientation="@CardOrientation.Vertical" Class="no-icon-expand">
-        <TelerikButton FillMode="@FlatFillMode" Icon="comment"></TelerikButton>
-        <TelerikButton FillMode="@FlatFillMode" Icon="comment"></TelerikButton>
+        <TelerikButton FillMode="@FlatFillMode" Icon=FontIcon.Comment></TelerikButton>
+        <TelerikButton FillMode="@FlatFillMode" Icon=FontIcon.Comment></TelerikButton>
     </CardActions>
 </TelerikCard>
 
@@ -84,8 +84,8 @@ There are two ways to prevent icon button expansion:
         <CardSubTitle>Custom CardActions Class</CardSubTitle>
     </CardHeader>
     <CardActions Orientation="@CardOrientation.Horizontal" Layout="CardActionsLayout.Stretch" Class="no-icon-expand">
-        <TelerikButton FillMode="@FlatFillMode" Icon="comment"></TelerikButton>
-        <TelerikButton FillMode="@FlatFillMode" Icon="comment"></TelerikButton>
+        <TelerikButton FillMode="@FlatFillMode" Icon=FontIcon.Comment></TelerikButton>
+        <TelerikButton FillMode="@FlatFillMode" Icon=FontIcon.Comment></TelerikButton>
     </CardActions>
 </TelerikCard>
 
@@ -96,8 +96,8 @@ There are two ways to prevent icon button expansion:
         <CardTitle>Horizontal orientation / Center layout</CardTitle>
     </CardHeader>
     <CardActions Orientation="@CardOrientation.Horizontal" Layout="@CardActionsLayout.Center">
-        <TelerikButton FillMode="@FlatFillMode" Icon="comment"></TelerikButton>
-        <TelerikButton FillMode="@FlatFillMode" Icon="comment"></TelerikButton>
+        <TelerikButton FillMode="@FlatFillMode" Icon=FontIcon.Comment></TelerikButton>
+        <TelerikButton FillMode="@FlatFillMode" Icon=FontIcon.Comment></TelerikButton>
     </CardActions>
 </TelerikCard>
 
diff --git a/knowledge-base/datepicker-calendar-templates.md b/knowledge-base/datepicker-calendar-templates.md
@@ -48,10 +48,10 @@ The components are wrapped in a container with a `position:relative` style. This
 TelerikDateInput:
 <div class="picker-wrapper">
     <TelerikDateInput @bind-Value="@DateValue" />
-    <TelerikButton OnClick="@ToggleCalendar" Icon="calendar" Class="picker-button" />
+    <TelerikButton OnClick="@ToggleCalendar" Icon=FontIcon.Calendar Class="picker-button" />
 
     <TelerikAnimationContainer @ref="@CalendarContainer" Class="picker-popup k-calendar">
-        <div class="close-button"><TelerikButton OnClick="@ToggleCalendar" Icon="close" /></div>
+        <div class="close-button"><TelerikButton OnClick="@ToggleCalendar" Icon=FontIcon.X /></div>
         <TelerikCalendar Value="@DateValue" ValueChanged="@CalendarValueChanged"></TelerikCalendar>
     </TelerikAnimationContainer>
 </div>
diff --git a/knowledge-base/drawer-add-tooltip.md b/knowledge-base/drawer-add-tooltip.md
@@ -39,7 +39,7 @@ If using a [TelerikTooltip](https://demos.telerik.com/blazor-ui/tooltip/overview
 <TelerikTooltip TargetSelector=".k-drawer-items span.k-icon[title]" />
 
 <p>
-    <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="menu">Toggle drawer</TelerikButton>
+    <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon=FontIcon.Menu>Toggle drawer</TelerikButton>
 </p>
 
 <TelerikDrawer Data="@Data"
diff --git a/knowledge-base/drawer-click-in-dropdown-closes-drawer.md b/knowledge-base/drawer-click-in-dropdown-closes-drawer.md
@@ -74,7 +74,7 @@ The example below demonstrates the described approach. In this case, the Drawer
     <div class="k-overlay"></div>
 }
 
-<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="menu">Open Drawer</TelerikButton>
+<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon=FontIcon.Menu>Open Drawer</TelerikButton>
 
 <TelerikDrawer @ref="@DrawerRef"
                Class="custom-drawer"
@@ -94,7 +94,7 @@ The example below demonstrates the described approach. In this case, the Drawer
             </DropDownListSettings>
         </TelerikDropDownList>
 
-        <TelerikButton OnClick="@(() => DrawerRef.CollapseAsync())" Icon="close">Close Drawer</TelerikButton>
+        <TelerikButton OnClick="@(() => DrawerRef.CollapseAsync())" Icon=FontIcon.X>Close Drawer</TelerikButton>
     </Template>
 </TelerikDrawer>
 
diff --git a/knowledge-base/drawer-prevent-collapse.md b/knowledge-base/drawer-prevent-collapse.md
@@ -65,7 +65,7 @@ I would like to prevent the Drawer from collapsing when an item from the navigat
         </div>
     </Template>
     <DrawerContent>
-        <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="menu" />
+        <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon=FontIcon.Menu />
         <div class="m-5">Content for @SelectedItem?.Text - @SelectedItem?.Description</div>
     </DrawerContent>
 </TelerikDrawer>
diff --git a/knowledge-base/drawer-small-screen.md b/knowledge-base/drawer-small-screen.md
@@ -41,7 +41,7 @@ To see the behavior, resize the browser window *@
                    OnChange="@OnChangeSmallScreenHandler">
 </TelerikMediaQuery>
 
-<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="menu">Toggle drawer</TelerikButton>
+<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon=FontIcon.Menu>Toggle drawer</TelerikButton>
 
 <TelerikDrawer Data="@Data"
                MiniMode="@isSmallScreen"
diff --git a/knowledge-base/editor-print-content.md b/knowledge-base/editor-print-content.md
@@ -54,7 +54,7 @@ The example below shows three possible techniques:
                    @bind-Value="@EditorValue">
         <EditorCustomTools>
             <EditorCustomTool Name="Print">
-                <TelerikButton OnClick="@PrintIframe" Icon="print">Print iframe</TelerikButton>
+                <TelerikButton OnClick="@PrintIframe" Icon=FontIcon.Print>Print iframe</TelerikButton>
             </EditorCustomTool>
         </EditorCustomTools>
     </TelerikEditor>
@@ -68,8 +68,8 @@ The example below shows three possible techniques:
                @bind-Value="@EditorValue">
     <EditorCustomTools>
         <EditorCustomTool Name="Print">
-            <TelerikButton OnClick="@PrintDiv" Icon="print">Print via CSS media</TelerikButton>
-            <TelerikButton OnClick="@PrintWindow" Icon="print">Print via popup window</TelerikButton>
+            <TelerikButton OnClick="@PrintDiv" Icon=FontIcon.Print>Print via CSS media</TelerikButton>
+            <TelerikButton OnClick="@PrintWindow" Icon=FontIcon.Print>Print via popup window</TelerikButton>
         </EditorCustomTool>
     </EditorCustomTools>
 </TelerikEditor>
diff --git a/knowledge-base/grid-detailtemplate-renders.md b/knowledge-base/grid-detailtemplate-renders.md
@@ -95,7 +95,7 @@ NestedComponent<br />
              SortMode="@SortMode.Single"
              OnRowClick="@RowClickHandler">
     <GridToolBarTemplate>
-        <GridCommandButton Command="Add" Icon="Add">Add Customer</GridCommandButton>
+        <GridCommandButton Command="Add" Icon=FontIcon.Plus>Add Customer</GridCommandButton>
         <GridSearchBox DebounceDelay="200"></GridSearchBox>
     </GridToolBarTemplate>
     <GridColumns>
diff --git a/knowledge-base/grid-search-button-click.md b/knowledge-base/grid-search-button-click.md
@@ -52,7 +52,7 @@ Also see the [Filter Descriptors documentation]({%slug components/grid/filtering
              @ref="@GridRef">
     <GridToolBarTemplate>
         <TelerikTextBox @bind-Value="@SearchValue" Width="200px" OnChange="@SearchGrid" />
-        <TelerikButton OnClick="@SearchGrid" Icon="search">Search Grid</TelerikButton>
+        <TelerikButton OnClick="@SearchGrid" Icon=FontIcon.Search>Search Grid</TelerikButton>
         <TelerikButton OnClick="@ClearSearch" Icon=FontIcon.Cancel>Clear Search</TelerikButton>
     </GridToolBarTemplate>
     <GridColumns>
diff --git a/knowledge-base/textbox-add-icon.md b/knowledge-base/textbox-add-icon.md
@@ -102,7 +102,7 @@ TextBoxes (`<input>` elements) can only hold plain text. It is possible to rende
             <div class="input-group-prepend">
                 <label for="theTb">
                     <span class="input-group-text">
-                        <TelerikFontIcon Icon="home" />
+                        <TelerikFontIcon Icon=FontIcon.Home />
                         &nbsp;Home
                     </span>
                 </label>
diff --git a/knowledge-base/textbox-empty-value-on-autofill.md b/knowledge-base/textbox-empty-value-on-autofill.md
@@ -49,7 +49,7 @@ The issue occurs after an upgrade to version 2.30.
                 @bind-Value="@Password">
 </TelerikTextBox>
 
-<TelerikButton Id="commandSubmit" Icon="login" OnClick="@OnLogin">
+<TelerikButton Id="commandSubmit" Icon=FontIcon.Login OnClick="@OnLogin">
     Login
 </TelerikButton>
 
@@ -100,7 +100,7 @@ The example below demonstrates the first approach - removing the default Debounc
                 DebounceDelay="0">
 </TelerikTextBox>
 
-<TelerikButton Id="commandSubmit" Icon="login" OnClick="@OnLogin">
+<TelerikButton Id="commandSubmit" Icon=FontIcon.Login OnClick="@OnLogin">
     Login
 </TelerikButton>
 
diff --git a/knowledge-base/window-modal-minimize-popup.md b/knowledge-base/window-modal-minimize-popup.md
@@ -58,8 +58,8 @@ To implement a responsible popup that can be minimized to the bottom of the page
         }
     </WindowContent>
     <WindowActions>
-        <WindowAction Name="MyMinimizer" Hidden="@(!isModal)" Icon="window-minimize" OnClick="@MyCustomMinimize" />
-        <WindowAction Name="MyExpander" Hidden="@isModal" Icon="window" OnClick="@MyCustomExpand" />
+        <WindowAction Name="MyMinimizer" Hidden="@(!isModal)" Icon=FontIcon.WindowMinimize OnClick="@MyCustomMinimize" />
+        <WindowAction Name="MyExpander" Hidden="@isModal" Icon=FontIcon.Window OnClick="@MyCustomExpand" />
     </WindowActions>
 </TelerikWindow>
 

Original file line number	Diff line number	Diff line change
@@ -66,7 +66,7 @@ The `context` of the template is a `SchedulerSlotTemplateContext` object that co
`66`	`66`	`@if (context.Start.TimeOfDay >= ControlDate.TimeOfDay`
`67`	`67`	`&& context.End.AddSeconds(-1).TimeOfDay <= ControlDate.AddHours(1).TimeOfDay)`
`68`	`68`	`{`
`69`		`- <div style="color: green;"><TelerikFontIcon Icon="pause"></TelerikIcon>Lunch Break</div>`
	`69`	`+ <div style="color: green;"><TelerikFontIcon Icon=FontIcon.Pause></TelerikIcon>Lunch Break</div>`
`70`	`70`	`}`
`71`	`71`	`</SlotTemplate>`
`72`	`72`	`<AllDaySlotTemplate>`
@@ -81,7 +81,7 @@ The `context` of the template is a `SchedulerSlotTemplateContext` object that co
`81`	`81`	`@if (context.Start.TimeOfDay >= ControlDate.TimeOfDay`
`82`	`82`	`&& context.End.AddSeconds(-1).TimeOfDay <= ControlDate.AddHours(1).TimeOfDay)`
`83`	`83`	`{`
`84`		`- <div style="color: green;"><TelerikFontIcon Icon="pause"></TelerikIcon>Lunch Break</div>`
	`84`	`+ <div style="color: green;"><TelerikFontIcon Icon=FontIcon.Pause></TelerikIcon>Lunch Break</div>`
`85`	`85`	`}`
`86`	`86`	`</SlotTemplate>`
`87`	`87`	`<AllDaySlotTemplate>`