---
title: "How to bind text in a button with an icon using Knockout?"  
description: "How to bind text in a button with an icon using Knockout?"  
author: "Utpal Vishwas"  
published: 2023-04-30  
updated: 2023-05-01  
canonical: https://www.mindstick.com/forum/158096/how-to-bind-text-in-a-button-with-an-icon-using-knockout  
category: "javascript"  
tags: ["javascript", "knockout.js"]  
reading_time: 2 minutes  

---

# How to bind text in a button with an icon using Knockout?

How to bind [text](https://www.mindstick.com/blog/301635/did-people-reinvent-texting-to-express-the-full-range-of-emotions) in a [button](https://www.mindstick.com/articles/63/how-to-add-button-in-datagridview-in-csharp-dot-net) with an [icon](https://www.mindstick.com/articles/13090/icon-the-identity-of-your-brand) using [Knockout](https://www.mindstick.com/forum/33538/how-to-insert-data-in-database-using-knockout-js)?

## Replies

### Reply by Aryan Kumar

To bind text in a button with an icon using Knockout, you can use the **html** binding to bind the button's content to an HTML string that includes both the text and the icon. Here's an example code snippet:

```html
<button data-bind="html: '<i class=\'fas fa-plus\'></i> Add Item'"></button>
```

In this example, we use the **html** binding to bind the button's content to an HTML string that includes an icon and the text "Add Item". We use the **class** attribute to set the icon to the "fas fa-plus" icon from the Font Awesome icon library.

You can replace the **fas fa-plus** icon with any other icon class that you want to use. You can also use other HTML elements, such as **span**, **div**, or **p**, to wrap the icon and text if you want to apply additional styling or formatting.

Note that using the **html** binding can be potentially risky if you are binding user-generated content, as it can leave your application vulnerable to cross-site scripting (XSS) attacks. Make sure to sanitize any user-generated content before using it in an **html** binding.


---

Original Source: https://www.mindstick.com/forum/158096/how-to-bind-text-in-a-button-with-an-icon-using-knockout

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
