How to custom ionic checkbox

ionic-v1
1

Hi everybody, I have a form and a checkbox. When the user click on the check box, I show the password. But I want to replace the basic circle icone by an eye. In the html browser inspector I found that the checkbox has a class checkbox-icon. How can I replace it by my picture ?

Thanks in advance.

2

the ion-checkbox is only a styled checkbox element.
Look here:

you can add an own class to the label where you set you icon

3

Thanks I’m going to test it

4

I insert in my label my picture, by I can’t call the function in the ngClickimage.

  <label class="item item-input"> 
            <input type="text"  ng-show="showPasswordIsChecked"  placeholder="Entrer password (5 caractères minimum)" ng-model="userModel.senha"
            required ng-pattern="/[\w\d]{3,15}/i"
            ng-focus="onPasswordFocus()"
            ng-blur="onPasswordBlur()">    

                 <input type="password"
            ng-show="!showPasswordIsChecked"
            placeholder="Entrer password (5 caractères minimum)"
            name="senha"
            ng-model="userModel.senha">

      </label>


          <label class="item item-input">                    
                        <input type="text"
            ng-show="showPasswordIsChecked"
            placeholder="Répéter le mot de passe"
            ng-model="userModel.confirmePassword"
            match="userModel.senha"
            required ng-pattern="/[\w\d]{3,15}/i">

                    <input type="password"
            ng-show="!showPasswordIsChecked"
            placeholder="Répéter le mot de passe"
            name="confirmePassword"
            ng-model="userModel.confirmePassword"
            required ng-pattern="/[\w\d]{3,15}/i">

          <span class="input-error" ng-if="form.confirmePassword.$touched && form.confirmePassword.$invalid"></span>


          </label>

What I want to do, is to put the ng-model, when I click on the picture, to true or false. And by this way I could show the password. This action is automatically done when I use the checkbox, but I want to have a picture instead of an checkbox

5

I found a solution. I put the image outside the label then i apply this css

.positionDiv{
    float: right;
    margin-top: -30px;
    position: relative;
    z-index: 2;
}

then I have my eye at first plan