Change checkbox tick color and icon - sapui5
<p>I need to change the color of the tick on a UI5 checkbox.
I've looked at the CSS and found out that this is in the <code>::before</code> selector:</p>

<p><a href="https://i.stack.imgur.com/2IMc4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2IMc4.png" alt="enter image description here"></a></p>

<p>I've added a class to the checkbox, called <code>.accept</code> and defined like this on the CSS file:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.accept.sapMCbBg.sapMCbMarkChecked::before{
    content: "\e05b";
    font-family: "SAP-icons";
    color: #00a600;
}</code></pre>
</div>
</div>
</p>

<p>This is not working. Do you have any suggestion?
Thank you.</p>

<p>EDIT: Here's the code for the checkbox:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var oCheckBox = new sap.m.CheckBox({
  text: "test",
  selected: false,
  select: function(oEvent){
    if (oEvent.getSource().getSelected() == true){
      oEvent.getSource().addStyleClass("accept");
    }else{
      oEvent.getSource().removeStyleClass("accept");
    }
  }
});</code></pre>
</div>
</div>
</p>