JQuery RTL Menu Icon

I am trying to use jQuery menu in Arabic RTL page. I can do RTL, but the icon must be ui-icon-carat-1-w

not ui-icon-carat-1-e

. I created a jsfiddle here . How do I change the direction of the arrows in the submenu so that they display carat-1-w

instead the carat-1-e

?

Also, is there any CSS reset for RTL support for jQuery to include jQuery RTL and Arabic.

body {
    text-align: right;
}

*{
    direction: rtl
}

a, a:link, a:visited{
    font-size: 16px;
    font-family: Arial,Verdana,Tahoma,Times,Sans-Serif;
    text-decoration: none;
    font-weight: normal;
}

.ui-menu {
    float: right;
}

.ui-menu .ui-menu-icon {
    right: auto;
    left: 0;
}

      

        
        
        
      

    

<ul id="menu" style="width: 200px;">
    <li><a href="#">العربية</a>
        <ul id="submenu">
            <li><a href="#">حسابات</a></li>
            <li>ادارة</li>    
            <li>رصيد</li>
        </ul> 
    </li>
    <li><a href="#">تسجيل</a></li>    
<li><a href="#">اتصال</a></li>
</ul>    


$(document).ready(function () {
    $('#menu').menu();
});