CODEWITHSUNDEEP
ionic-framework
DonFabiolas
DonFabiolas

Reputation: 589

Ionic ion-checkbox can we change icon with another icon?

Can we change icon from Ionic ion-checkbox ?

Can we use http://ionicons.com/ ?

for now, here my code : 

<ion-view>
  <ion-content class="has-header">
    <ion-list>
        <ion-checkbox class="item-checkbox-right">item 1</ion-checkbox>
        <ion-checkbox class="item-checkbox-right">item 2</ion-checkbox>
        <ion-checkbox class="item-checkbox-right">item 3</ion-checkbox>

Thank you

Upvotes: 3

Views: 9491

Answers (4)

Eduardo Mihalache
Eduardo Mihalache

Reputation: 368

My solution: 

.checkbox-md {

  .checkbox-icon:before {
    display: inline-block;
    content: "\f219";
    font-family: "Ionicons";
    font-size: 1.9em;
    color: $primary;
  }
  .checkbox-icon {
    background-color: transparent;
    border: none;
    height: 32px;

    &.checkbox-checked:before {
      display: inline-block;
      content: "\f147";
      font-family: "Ionicons";
      font-size: 1.9em;
      color: $primary;
    }
    .checkbox-inner {
      border: none;
    }
  }
}

Upvotes: 0

Prashant G
Prashant G

Reputation: 4900

Well, you can change the icon for ion-checkbox with a little tweak ;).

Approach

  1. remove the default icon
  2. add a HTML element whose class changes on the ng-model value of ion-checkbox

Code

HTML:

<ion-checkbox class="custom-checkbox" ng-model="itemChecked">
  I'm a checkbox
  <i class="icon"
     ng-class="{'true':'ion-ios-circle-filled', 'false':'ion-ios-circle-outline'}[!!itemChecked]">
  </i>
</ion-checkbox>

CSS:

// positioning custom icon properly
.custom-checkbox .icon {
  font-size: 20px;
  position: absolute;
  left: 16px;
}

// hiding default icon
.custom-checkbox i.checkbox-icon {
  display: none;
}

Here's the CodePen Demo for it.

Upvotes: 0

DonFabiolas
DonFabiolas

Reputation: 589

Big Thank You @Atula, we cannot change icon from ion-checkbox,

So, with css Ionic icon, here you are my solution (if you have better ? you're welcome) :

Please, help

html

<ion-view>
  <ion-content class="has-header">

  <div id="frameCheckboxHome" data-ng-click="homeCtrl.toggle('Item1')">
    <label>Item1</label><!-- white space 
    --><div id="checkboxHome"><i class="icon ion-heart {{homeCtrl.homeTab['Item1']}}"></i></div>    
  </div>

  <div id="frameCheckboxHome" data-ng-click="homeCtrl.toggle('Item2')">
    <label>Item2</label><!-- white space 
    --><div id="checkboxHome"><i class="icon ion-heart {{homeCtrl.homeTab['Item2']}}"></i></div>    
  </div>

  </ion-content>
</ion-view>

scss

#frameCheckboxHome{
width: 100%;
border-bottom: lightgrey solid 1px;
padding-top: 10px;
padding-bottom: 10px;

label{
    width: 80%;     
    margin: 0px;        
    vertical-align: middle;
    padding-left: 10px;

}
div{
    width: 20%;
    margin: 0px;
    vertical-align: middle;
    display: inline-block;      
    text-align: center;
}
div i{      
    color: lightgrey;
    font-size: 36px;
}
.selected { color: orange; }    
}

js with angular meteor 1.3 Ionic

class Home {

  constructor($scope, $reactive) {
    'ngInject';

    $reactive(this).attach($scope);

    this.myTab = [];

   }

       toggle(param){

    !this.myTab[param] ? this.myTab[param] = "selected" : this.myTab[param] = "";

   }

}

    ...

    .component(name, {
      templateUrl: `imports/ui/components/${name}/${template}.html`,
      controllerAs: 'homeCtrl',
      controller: Home
    })

    ...

Upvotes: 2

Atula
Atula

Reputation: 2173

No, You can't.
As you can see that it is a default icon Set for ion-checkbox. You can only change the css like styling it by change color, background, margin, padding etc.
Alternatively you can change you checkbox to <input type="checkbox> and style it as in ionic.

UPADTED I have opted pure css solution. css

input[type="checkbox"] {
    display: none;
}

input[type=checkbox]:not(old) + label {
display: inline-block;
padding: 1px;
line-height: 30px;
background:url(https://cdn0.iconfinder.com/data/icons/woocons1/Checkbox%20Empty.png) left top no-repeat;
background-size: 25px 25px;
}

input[type=checkbox]:checked  + label {    background:url(https://cdn0.iconfinder.com/data/icons/woocons1/Checkbox%20Full.png) left top no-repeat;
background-size: 25px 25px;
}

html

<input type="checkbox" id="1">
<label for="1">Sector 1</label>

Upvotes: 2

Related Questions