# Custom Icon

## Content



FlexGrid displays various icons during its operations such as sorting, filtering etc. These icons can be changed using various icon templates provided in the FlexGrid control. These icon templates can be accessed through following properties.

| **Properties** | **Description** |
| --- | --- |
| SortAscendingIconTemplate | Allows you to set the template of sort icon for sorting values in ascending order. |
| SortDescendingIconTemplate | Allows you to set the template of sort icon for sorting values in descending order. |
| ActiveFilterIconTemplate | Allows you to set the template which is used to present the active filter icon when the column is not filtered. |
| InactiveFilterIconTemplate | Allows you to set the template which is used to present the inactive filter icon when the column is filtered. |
| ExpandedAboveIconTemplate | Allows you to set the template for icon when the item group/detail is expanded above. |
| ExpandedBelowIconTemplate | Allows you to set the template for icon when the item group/detail is expanded below. |
| CollapsedIconTemplate | Allows you to set the template for group icon when the item group/detail is collapsed. |
| NewRowIconTemplate | Allows you to set the template of new row icon displayed in the header of a new row. |

You can change the icons set by these templates either to the built-in icons provided by the FlexGrid or to your own custom image, geometric figures, font etc as an icon.

The following image displays a custom image which is set as a sort icon for sorting values in descending order.

![Custom Icon](https://cdn.mescius.io/document-site-files/images/3ca88af8-b501-48d7-a446-601c9251a2fb/images/sortingcustomicon.png)

FlexGrid also allows you to change the appearance of the different icons used in the control using the C1Icon class. The C1Icon class is an abstract class that provides a series of different objects that can be used for displaying monochromatic icons which can easily be tinted and resized.

### Using built-in Icons

To set the built-in icons for the abovementioned templates, you can set the following properties of the C1IconTemplate class.

| Icon | Image |
| --- | --- |
| Edit | ![](https://cdn.mescius.io/document-site-files/images/3ca88af8-b501-48d7-a446-601c9251a2fb/images/edit.png) |
| Asterisk | ![](https://cdn.mescius.io/document-site-files/images/3ca88af8-b501-48d7-a446-601c9251a2fb/images/asterik.png) |
| ArrowUp | ![](https://cdn.mescius.io/document-site-files/images/3ca88af8-b501-48d7-a446-601c9251a2fb/images/arrowup.png) |
| ArrowDown | ![](https://cdn.mescius.io/document-site-files/images/3ca88af8-b501-48d7-a446-601c9251a2fb/images/arrowdown.png) |
| ChevronUp | ![](https://cdn.mescius.io/document-site-files/images/3ca88af8-b501-48d7-a446-601c9251a2fb/images/chevronup.png) |
| ChevronDown | ![](https://cdn.mescius.io/document-site-files/images/3ca88af8-b501-48d7-a446-601c9251a2fb/images/chevrondown.png) |
| ChevronLeft | ![](https://cdn.mescius.io/document-site-files/images/3ca88af8-b501-48d7-a446-601c9251a2fb/images/chevronleft.png) |
| ChevronRight | ![](https://cdn.mescius.io/document-site-files/images/3ca88af8-b501-48d7-a446-601c9251a2fb/images/chevronright.png) |
| TriangleNorth | ![](https://cdn.mescius.io/document-site-files/images/3ca88af8-b501-48d7-a446-601c9251a2fb/images/trianglenorth.png) |
| TriangleSouth | ![](https://cdn.mescius.io/document-site-files/images/3ca88af8-b501-48d7-a446-601c9251a2fb/images/trianglesouth.png) |
| TriangleEast | ![](https://cdn.mescius.io/document-site-files/images/3ca88af8-b501-48d7-a446-601c9251a2fb/images/triangleast.png) |
| TriangleWest | ![](https://cdn.mescius.io/document-site-files/images/3ca88af8-b501-48d7-a446-601c9251a2fb/images/trianglewest.png) |
| TriangleSouthEast | ![](https://cdn.mescius.io/document-site-files/images/3ca88af8-b501-48d7-a446-601c9251a2fb/images/trianglesoutheast.png) |
| Star5 | ![](https://cdn.mescius.io/document-site-files/images/3ca88af8-b501-48d7-a446-601c9251a2fb/images/star5.png) |

For instance, to change the default sort ascending icon to a built-in icon, for example, TriangleNorth, use the following code for FlexGrid .NET and .NET Framework versions.

### .NET Framework

```csharp
grid.SortAscendingIconTemplate = C1IconTemplate.TriangleNorth;
```

### .NET

```dotnet
grid.SortAscendingIconTemplate = C1IconTemplate.Star5;
```

### Using Custom Icons

FlexGrid also allows you to set your own custom image, font, or path as an icon through the respective classes of **C1.WPF.Core** assembly for **.NET** version and **C1.WPF** assembly for **.NET Framework** version.

| **Icon Type** | **Icon Class Name** |
| --- | --- |
| Bitmap/Image | C1BitmapIcon class |
| Font character | C1FontIcon class |
| Path | C1PolygonIcon class (child class of C1VectorIcon class) |

### .NET Framework

For instance, to change the default sort descending icon to a custom image, use the following code for FlexGrid .NET and .NET Framework versions.

```csharp
BitmapImage imgDown = new BitmapImage();
 imgDown.BeginInit();
 imgDown.UriSource = new Uri("icons/arrow_down.png", UriKind.Relative);
 imgDown.EndInit();
 _flexGrid.SortDescendingIconTemplate = new C1IconTemplate(() => new C1BitmapIcon()
 {
      Source = imgDown,
      Width = 20,
      Height = 20
 });
```

### .NET

For instance, to change the default sort descending icon to a custom image, use the following code:

```csharp
BitmapImage imgDown = new BitmapImage();
imgDown.BeginInit();
imgDown.UriSource = new Uri("icons/arrow_down.png", UriKind.Relative);
imgDown.EndInit();
grid.SortDescendingIconTemplate = new C1IconTemplate(() => new C1BitmapIcon()
{
    Source = imgDown,
    Width = 20,
    Height = 20
```