Knockout binding text in button with icon-CodePudding

In my HTML page I need to include a button element with a description and an icon (I use an icon from the fontawesome.com library).

To compile the data in my page I use the Knockout Javascript framework.

Compilation of the descriptive text of the button is done by text binding as in the example:

<button  data-bind="text:GetTranslatedText('SomeText')">
  <i ></i>
</button>

The GetTranslatedText("SomeText") function returns the text translated into the language used by the user.

My problem is that when the framework compiles the text of the button, it overwrites the <i> element with which the icon is displayed.

Is there a simple way to concatenate both the text and HTML element of the icon into the binding?

Thanks!

CodePudding user response：

Rather than binding the text to the button, which as you've seen overrides the buttons contents, bind it to a span alongside the icon:

<button >
  <i ></i> <span data-bind="text:GetTranslatedText('SomeText')"></span>
</button>