# Changing ToolStripButton icons

This section will show you how to change the ToolStripButton icons of the converted control. To start, we will be using a form named **Form1** that already contains a ToolStrip control named **toolStrip1,** and this in turn, already contains four ToolStrip buttons with their respective icon: **toolStripButton1**, **toolStripButton2**, **toolStripButton3,** and **toolStripButton4**.

![Original migrated application](/files/j3393dhwrevaDjQHgkVQ)

{% hint style="info" %}
In the **Form1.Designer.cs,** **toolStripButton1** and **toolStripButton3** have '*Image*' as their '*DisplayStyle*' property, while **toolStripButton2** and **toolStripButton4** have '*ImageAndText*' as their value. 
{% endhint %}

Let's assume that the developer has already created a sprite image with the icons of the ToolStrip buttons. So, the first step is to copy the sprite image into the frontend Angular migrated project that has a folder called '*images*' under the *'src/assets*' directory.

Then in the backend migrated project, go to **Form1.Designer.cs** and change the *'Image'* property from each toolstrip button to the sprite image url.

As mentioned above, there are 2 scenarios. However, regardless of the 'DisplayStyle' property that each toolstrip button has, the procedure to change the button icon is the same.

* For the first one, when the '*DisplayStyle*' value is *'Image'*, it's done as follows:

```csharp
// 
// toolStripButton1
//
this.toolStripButton1.DisplayStyle = Mobilize.Web.ToolStripItemDisplayStyle.Image;    
this.toolStripButton1.Image = "assets/images/spriteImage.png";
this.toolStripButton1.Name = "toolStripButton1";
this.toolStripButton1.Size = new System.Drawing.Size(29, 24);
this.toolStripButton1.Text = "toolStripButton1";
this.toolStripButton1.Id = "toolStripButton1";
```

* On the other side, when the value is *'ImageAndText'*, it's done as follows:

```javascript
// 
// toolStripButton2
//
this.toolStripButton2.DisplayStyle = Mobilize.Web.ToolStripItemDisplayStyle.ImageAndText;  
this.toolStripButton2.Image = "assets/images/spriteImage.png";
this.toolStripButton2.Name = "toolStripButton2";
this.toolStripButton2.Size = new System.Drawing.Size(29, 24);
this.toolStripButton2.Text = "toolStripButton2";
this.toolStripButton2.Id = "toolStripButton2";
```

Finally, compile both frontend and backend migrated projects and then run the app. The new icons should be shown in the toolbar properly.

![Application with the new toolStripButtons icon](/files/EMAkCDKO9BJ70Lv2HmyH)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gapvelocity.ai/webmap/winforms/extend-or-modify-the-converted-application/changing-toolstripbutton-icons-through-css.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.