Merge branch 'vnext' into didimmova/update-badge-topic

kdinev · web-flow · commit fbf14a669d62 · 2026-04-20T18:19:40.000+03:00
diff --git a/en/components/action-strip.md b/en/components/action-strip.md
@@ -77,6 +77,9 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
 export class HomeComponent {}
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 Now that you have the Ignite UI for Angular Action Strip module or directives imported, you can start with a basic configuration of the `igx-action-strip` component.
 
 ## Using the Angular Action Strip Component
diff --git a/en/components/avatar.md b/en/components/avatar.md
@@ -142,6 +142,9 @@ Analogically, the avatar can display an icon via the [`icon`]({environment:angul
 </igx-avatar>
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 You should see something like this:
 
 <div class="sample-container loading" style="height:100px">
diff --git a/en/components/badge.md b/en/components/badge.md
@@ -64,6 +64,9 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge';
 export class HomeComponent {}
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 Now that you have the Ignite UI for Angular Badge module or component imported, you can start with a basic configuration of the `igx-badge` component.
 
 ## Using the Angular Badge Component
diff --git a/en/components/banner.md b/en/components/banner.md
@@ -88,6 +88,9 @@ In order to display the banner component, use its [`open()`]({environment:angula
 
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 > [!NOTE]
 > The `IgxBannerModule` includes a default banner button `Dismiss`, which closes the banner.
 
diff --git a/en/components/button-group.md b/en/components/button-group.md
@@ -81,6 +81,9 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
 export class HomeComponent {}
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 Now that you have the Ignite UI for Angular Button Group module or directives imported, you can start with a basic configuration of the `igx-buttongroup` and its buttons.
 
 ## Using for Angular Button Group Component
diff --git a/en/components/button.md b/en/components/button.md
@@ -119,6 +119,9 @@ As of version `17.1.0` the IgniteUI for Angular exposes a new `igxIconButton` di
 </button>
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 <div class="sample-container loading" style="height: 70px">
     <iframe class="lazyload" seamless width="100%" height="100%" frameborder="0" data-src="{environment:demosBaseUrl}/data-entries/buttons-sample-7">
 </iframe></div>
diff --git a/en/components/card.md b/en/components/card.md
@@ -104,6 +104,9 @@ import { IGX_CARD_DIRECTIVES } from 'igniteui-angular/card';
 export class HomeComponent {}
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 Now that you have the Ignite UI for Angular Card module or directives imported, you can start using the `igx-card` component.
 
 ## Using the Angular Card Component
diff --git a/en/components/carousel.md b/en/components/carousel.md
@@ -193,6 +193,9 @@ To achieve this we will use the [IgxCarouselPrevButtonDirective]({environment:an
 ...
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 ### Slide containing other components
 
 <div class="divider--half"></div>
diff --git a/en/components/chip.md b/en/components/chip.md
@@ -99,6 +99,9 @@ Selection can be enabled by setting the [`selectable`]({environment:angularApiUr
 </igx-chip>
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 ### Removing
 
 <img class="responsive-img"  src="../images/chip/removing_default.gif" alt="Removing Default" />
diff --git a/en/components/circular-progress.md b/en/components/circular-progress.md
@@ -130,6 +130,9 @@ You can dynamically change the value of the progress by using external controls
 </div>
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 Add the methods that increment and decrement the value:
 
 ```typescript
diff --git a/en/components/combo-templates.md b/en/components/combo-templates.md
@@ -131,6 +131,9 @@ Use selector `[igxComboToggleIcon]`:
 </igx-combo>
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 ### Clear Icon Template
 
 Use selector `[igxComboClearIcon]`:
diff --git a/en/components/date-picker.md b/en/components/date-picker.md
@@ -156,6 +156,9 @@ The [`IgxDatePickerComponent`]({environment:angularApiUrl}/classes/igxdatepicker
 </igx-date-picker>
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 The above snippet will add an additional toggle icon at the end of the input, right after the default clear icon. This will not remove the default toggle icon, though as prefixes and suffixes can be stacked one after the other.
 
 #### Customizing the toggle and clear icons
diff --git a/en/components/date-range-picker.md b/en/components/date-range-picker.md
@@ -276,9 +276,12 @@ In the default configuration, with a single read-only input, a default calendar
 </igx-date-range-picker>
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 When a Date Range Picker has two separate inputs for start and end dates, it doesn't expose these icons by default. The [`IgxPickerToggleComponent`]({environment:angularApiUrl}/classes/igxpickertogglecomponent.html)  and [`IgxPickerClearComponent`]({environment:angularApiUrl}/classes/igxpickerclearcomponent.html) should be manually added as children of the [`IgxDateRangeStartComponent`]({environment:angularApiUrl}/classes/igxdaterangestartcomponent.html) or [`IgxDateRangeEndComponent`]({environment:angularApiUrl}/classes/igxdaterangeendcomponent.html) like so:
 
->[!NOTE]
+> [!NOTE]
 > In the two-input configuration:
 >
 > - use `igx-picker-toggle igxPrefix` for the calendar action
diff --git a/en/components/dialog.md b/en/components/dialog.md
@@ -169,6 +169,9 @@ We add two input groups consisting of a label and and input decorated with the [
 </igx-dialog>
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 
 <code-view style="height:300px"
            data-demos-base-url="{environment:demosBaseUrl}"
diff --git a/en/components/drag-drop.md b/en/components/drag-drop.md
@@ -127,6 +127,9 @@ The ghost element by default is a copy of the base element the `igxDrag` is used
 
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 ### Dragging Without Ghost
 
 If you would like to move the base element, to which the `igxDrag` directive is applied, you can do that by setting the [`ghost`]({environment:angularApiUrl}/classes/igxdragdirective.html#ghost) input to `false`. That way there will be no extra ghost element rendered and if you need to apply custom styling when dragging and element, you can apply it directly to the base element.
diff --git a/en/components/drop-down.md b/en/components/drop-down.md
@@ -173,6 +173,9 @@ To provide a more useful visual information, use the [isHeader]({environment:ang
 </igx-drop-down>
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 ```typescript
 // dropdown.component.ts
 export class MyDropDownComponent {
diff --git a/en/components/grid/grid.md b/en/components/grid/grid.md
@@ -232,6 +232,9 @@ public contextObject = { firstProperty: 'testValue', secondProperty: 'testValue1
 </igx-column>
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 As you can see, we are adding **draggable** attribute set to _false_.
 
 ### Cell Template
diff --git a/en/components/grids_templates/row-editing.md b/en/components/grids_templates/row-editing.md
@@ -77,6 +77,7 @@ export class AppModule {}
 ```
 
 Then define a @@igComponent with bound data source and [`rowEditable`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowEditable) set to true:
+
 @@if (igxName ==='IgxGrid') {
 
 ```html
diff --git a/en/components/hierarchicalgrid/hierarchical-grid.md b/en/components/hierarchicalgrid/hierarchical-grid.md
@@ -22,8 +22,11 @@ In this angular grid example you can see how users can visualize hierarchical se
 
 ## Getting Started with Ignite UI for Angular Hierarchical Data Grid
 
->[!NOTE]
->**This component can utilize the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) **optionally**. It can be imported in the root module of the application in order for touch interactions to work as expected.**.
+> [!NOTE]
+> This component can utilize the [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) **optionally**. It can be imported in the root module of the application in order for touch interactions to work as expected.
+
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
 
 To get started with the Ignite UI for Angular Hierarchical Data Grid component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:
 
diff --git a/en/components/icon-button.md b/en/components/icon-button.md
@@ -50,6 +50,9 @@ import { IgxIconButtonDirective } from 'igniteui-angular/directives';
 export class HomeComponent {}
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 Now that you have the Ignite UI for Angular Icon Button directive imported, you can start using the `igxIconButton` directive on elements.
 
 ## Angular Icon Button Types
diff --git a/en/components/icon-service.md b/en/components/icon-service.md
@@ -63,6 +63,9 @@ Having registered the two font families above, we can now consume their icons in
 <igx-icon family="fa-solid" name="car"></igx-icon>
 ```
 
+> [!NOTE]
+> To render icons from the default `material` family with `igx-icon`, add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 You might have noticed that for the `material` family we use the ligature `name` as name, while in the case of the `fa-solid` family we specify the `className` for name, which is `fa-car` but drop the `fa-` prefix as it has been specified when we registered the icon family in the previous step.
 
 ### Adding SVG Icons
diff --git a/en/components/input-group.md b/en/components/input-group.md
@@ -78,6 +78,9 @@ export class HomeComponent {
 }
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 Now that you have the Ignite UI for Angular Input Group module or directives imported, you can start using the `igx-input-group` component.
 
 > [!NOTE]
diff --git a/en/components/linear-progress.md b/en/components/linear-progress.md
@@ -209,6 +209,9 @@ You can dynamically change the value of the progress bar by using external contr
 </div>
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 Create the methods that increment and decrement the value:
 
 ```typescript
diff --git a/en/components/list.md b/en/components/list.md
@@ -296,6 +296,9 @@ Cool, now let's update the template for our contacts list to show the avatar and
 </igx-list>
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 - `igxListThumbnail` is meant to be used if we need to add some kind of media at the beginning of our list items. The directive will wrap the target element in our case igx-avatar in a container that will provide some default position and spacing.
 - `igxListAction` is meant to be used for list items that have some kind of action or metadata, for example, switch, radio-button, checkbox, etc. In our case the action is will be represented by an `igx-icon`. Again, the directive will wrap the target element in a container that will have the correct position and spacing.
 - `igxListLine` is meant to be used if we need some text in-between `igxListThumbnail` and `igxListAction` the directive will make sure that the text position, spacing and alignment will look great with the other two directives around.
diff --git a/en/components/mask.md b/en/components/mask.md
@@ -75,6 +75,9 @@ import { IgxMaskDirective, IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/i
 export class HomeComponent {}
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 Now that you have the Ignite UI for Angular Mask module or directive imported, you can start using the `igxMask` directive.
 
 ## Using the Angular Mask
diff --git a/en/components/navbar.md b/en/components/navbar.md
@@ -126,6 +126,9 @@ Next, we need to update our template with an icon button for each of the options
 </igx-navbar>
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 If all went well, you should see the following in your browser:
 
 <code-view style="height: 300px"
diff --git a/en/components/navdrawer.md b/en/components/navdrawer.md
@@ -98,6 +98,9 @@ export class HomeComponent {
 }
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 Now that you have the Ignite UI for Angular Navigation Drawer module or directives imported, you can start using the `igx-nav-drawer` component.
 
 ## Using the Angular Navigation Drawer
diff --git a/en/components/pivotGrid/pivot-grid.md b/en/components/pivotGrid/pivot-grid.md
@@ -33,6 +33,9 @@ To get started with the Ignite UI for Angular Pivot Grid component, first you ne
 ng add igniteui-angular
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 For a complete introduction to the Ignite UI for Angular, read the [_getting started_](../general/getting-started.md) topic.
 
 The next step is to import the `IgxPivotGridModule` in your **app.module.ts** file.
diff --git a/en/components/select.md b/en/components/select.md
@@ -141,6 +141,9 @@ The Select component supports the following directives applicable to the [Input
 </igx-select>
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 <code-view style="height: 350px;"
            data-demos-base-url="{environment:demosBaseUrl}"
            iframe-src="{environment:demosBaseUrl}/data-entries/select-input-directives/" >
diff --git a/en/components/snackbar.md b/en/components/snackbar.md
@@ -223,6 +223,9 @@ Let’s create a list with contacts that can be deleted. When an item is deleted
 </igx-list>
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 ```typescript
 //sample.component.ts
 
diff --git a/en/components/stepper.md b/en/components/stepper.md
@@ -115,6 +115,8 @@ Steps can be declared using one of the following approaches.
 </igx-stepper>
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
 
 - Creating static steps
 
diff --git a/en/components/texthighlight.md b/en/components/texthighlight.md
@@ -142,6 +142,9 @@ Let's create a search box that we can use to highlight different parts of the te
 </div>
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 Then, we will add a div with text and the IgxTextHighlight directive. Note that, since we need to bind the value input to the text in the div, we will also use interpolation for the div's text.
 
 ```html
diff --git a/en/components/time-picker.md b/en/components/time-picker.md
@@ -155,6 +155,9 @@ In the following example we have added a custom label and hint and changed the d
 </igx-time-picker>
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 ```typescript
 public date: Date = new Date();
 ```
diff --git a/en/components/tooltip.md b/en/components/tooltip.md
@@ -229,6 +229,9 @@ Let's start by creating our map. We need a simple div that has for a background
 </div>
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 Now for the tooltip! For its content, we will create a container that will be populated with some text information elements and an avatar. Then we will simply attach the tooltip to the target and include some nice CSS styling!
 
 ```html
diff --git a/en/components/transaction-how-to-use.md b/en/components/transaction-how-to-use.md
@@ -83,6 +83,9 @@ In our html template, we define an [`igxList`]({environment:angularApiUrl}/class
 </igx-list>
 ```
 
+> [!NOTE]
+> This example uses `igx-icon` with the default Material Icons family. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 ## Pipe for pending changes
 
 The list component from above uses the `transactionBasePipe` to display changes to the items in the wishlist without affecting the original data. Here is how the pipe looks like:
diff --git a/en/components/tree.md b/en/components/tree.md
@@ -273,6 +273,9 @@ To create a reusable template for your nodes, declare `<ng-template>` **within `
 </igx-tree>
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 Additionally, by using the [expandIndicator]({environment:angularApiUrl}/classes/igxtreecomponent.html#expandIndicator) input you have the ability to set a custom template to be used for rendering the expand/collapse indicators of nodes.
 
 ```html
diff --git a/en/components/treegrid/load-on-demand.md b/en/components/treegrid/load-on-demand.md
@@ -67,6 +67,9 @@ If you want to provide your own custom loading indicator, you may create an ng-t
 </igx-tree-grid>
 ```
 
+> [!NOTE]
+> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
+
 ## API References
 
 <div class="divider--half"></div>
