# Customize Icons

Customize the icons in the Calendar UI. Learn more about customizing icons of the Calendar control's elements in Blazor documentation.

## Content



Calendar allows you to customize the icons for its expand and collapse button, navigation buttons and today icon. It provides you the following properties in the [C1Calendar](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Calendar/C1.Blazor.Calendar.C1Calendar.html) class which can be used to customize the icons in Calendar control.

| **Properties** | **Description** |
| --- | --- |
| [CollapseViewIconTemplate](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Calendar/C1.Blazor.Calendar.C1Calendar.CollapseViewIconTemplate.html) | The template which is used to create icons for month expanse/collapse button in expanded state |
| [ExpandViewIconTemplate](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Calendar/C1.Blazor.Calendar.C1Calendar.ExpandViewIconTemplate.html) | The template which is used to create icons for month expanse button in collapsed state |
| [NextIconTemplate](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Calendar/C1.Blazor.Calendar.C1Calendar.NextIconTemplate.html) | The template which is used to create icons for next button. |
| [PrevIconTemplate](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Calendar/C1.Blazor.Calendar.C1Calendar.PrevIconTemplate.html) | The template which is used to create icons for previous button. |
| [TodayIconTemplate](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Calendar/C1.Blazor.Calendar.C1Calendar.TodayIconTemplate.html) | The template which is used to create icons for Today button. |

All these properties mentioned above create icons for different elements of the Calendar control using [C1IconTemplate](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Core/C1.Blazor.Core.C1IconTemplate.html) class. The following images displays different icons used in the Calendar control for depicting the expand/collapse and navigation buttons along with the today icon.

![Calendar control with customized icons](https://cdn.mescius.io/document-site-files/images/f5b600ba-f1a7-4f89-a20c-aa6c0c35880d/images/calendar-customicon.png)

The following code demonstrates how you can use the properties listed in the table above to change the icons in the Calendar control.

```razor
<C1Calendar ExpandViewIconTemplate="@C1.Blazor.Core.C1IconTemplate.ArrowDown"
            CollapseViewIconTemplate="@C1.Blazor.Core.C1IconTemplate.ArrowUp"
            TodayIconTemplate="@C1.Blazor.Core.C1IconTemplate.Asterisk"
            NextIconTemplate="@C1.Blazor.Core.C1IconTemplate.TriangleRight"
            PrevIconTemplate="@C1.Blazor.Core.C1IconTemplate.TriangleLeft">
</C1Calendar>
```