Mohammad,
You need to create a two button system where one only shows if the other does not.
Actually I have being through a few repetitions to develop this method;
here is an example ripped from my current work.
\define ea-toggle()
<$list filter="[is[current]has[view-caption]">
{{!!view-caption}}
</$list>
<$list filter="[is[current]!edit-view-caption[yes]]">
<$button set="!!edit-view-caption" setTo="yes" class="tc-btn-invisible">
{{$:/core/images/edit-button}}
</$button>
</$list>
<$list filter="[is[current]edit-view-caption[yes]]">
{{||$:/PSaT/Viewer/edit-view-caption}}
<$button set="!!edit-view-caption" setTo="no" tooltip="save and set view-caption" class="tc-btn-invisible">
{{$:/core/images/done-button}}
</$button>
</$list>
\end
Notice how the filter to display each button is a simple negation of the other, and the !edit-view-caption[yes]]
Helps deal with the state field not existing in addition to the no state.
Of course you could use two checked and unchecked icons but the checkbox widget does that well.
I trick I found recently was to use a special character rather than an icon
https://www.w3schools.com/charsets/ and allow the selected state to simply underline the character.
eg ☏ and ☏
Regards
Tony