Ion-checkbox custom icon


#1

hi
is there a way to use custom icons with ionic check box in ionic3
or at least use one of ionic icons ?
regards


#2

How exactly should that work? Should the icon replace the checkbox?


#3

yes i want to use an icon for checked and another icon for unchecked without the checkbox


#4

I did this in an older (2.2.0) project by styling it through CSS like this:

	    .checkbox-md {
			margin: 9px 15px 9px 4px;
			.checkbox-icon {
				  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3C!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='85px' height='85px' viewBox='0 0 85 85' style='enable-background:new 0 0 85 85;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0{fill:%23FFFFFF;} %3C/style%3E%3Cpath class='st0' d='M63.5,6.1l-0.8,12.2c-0.2,2.8,2.1,5.2,4.9,5.1l12.2-0.4c4.5-0.2,6.7,5.4,3.3,8.4l-9.2,8 c-2.1,1.9-2.2,5.2-0.1,7.1l8.9,8.3c3.3,3.1,0.9,8.6-3.6,8.3L67,62.2c-2.8-0.2-5.2,2.1-5.1,4.9l0.4,12.2c0.2,4.5-5.4,6.7-8.4,3.3 l-8-9.2c-1.9-2.1-5.2-2.2-7.1-0.1l-8.3,8.9c-3.1,3.3-8.6,0.9-8.3-3.6L23,66.5c0.2-2.8-2.1-5.2-4.9-5.1L5.8,61.8 c-4.5,0.2-6.7-5.4-3.3-8.4l9.2-8c2.1-1.9,2.2-5.2,0.1-7.1l-8.9-8.3c-3.3-3.1-0.9-8.6,3.6-8.3l12.2,0.8c2.8,0.2,5.2-2.1,5.1-4.9 L23.4,5.4c-0.2-4.5,5.4-6.7,8.4-3.3l8,9.2c1.9,2.1,5.2,2.2,7.1,0.1l8.3-8.9C58.3-0.8,63.8,1.6,63.5,6.1'/%3E%3C/svg%3E");
				  background-color: transparent;
				  background-size: cover;
				  border: none;
				  &.checkbox-checked {
				  	  background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3C!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='85px' height='85px' viewBox='0 0 85 85' style='enable-background:new 0 0 85 85;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0{fill:%23E5428F;} %3C/style%3E%3Cpath class='st0' d='M63.5,6.1l-0.8,12.2c-0.2,2.8,2.1,5.2,4.9,5.1l12.2-0.4c4.5-0.2,6.7,5.4,3.3,8.4l-9.2,8 c-2.1,1.9-2.2,5.2-0.1,7.1l8.9,8.3c3.3,3.1,0.9,8.6-3.6,8.3L67,62.2c-2.8-0.2-5.2,2.1-5.1,4.9l0.4,12.2c0.2,4.5-5.4,6.7-8.4,3.3 l-8-9.2c-1.9-2.1-5.2-2.2-7.1-0.1l-8.3,8.9c-3.1,3.3-8.6,0.9-8.3-3.6L23,66.5c0.2-2.8-2.1-5.2-4.9-5.1L5.8,61.8 c-4.5,0.2-6.7-5.4-3.3-8.4l9.2-8c2.1-1.9,2.2-5.2,0.1-7.1l-8.9-8.3c-3.3-3.1-0.9-8.6,3.6-8.3l12.2,0.8c2.8,0.2,5.2-2.1,5.1-4.9 L23.4,5.4c-0.2-4.5,5.4-6.7,8.4-3.3l8,9.2c1.9,2.1,5.2,2.2,7.1,0.1l8.3-8.9C58.3-0.8,63.8,1.6,63.5,6.1'/%3E%3C/svg%3E");
				  }
				  .checkbox-inner {
				  	border: none;

				  }
			}
	    }

#5

If you really want to use an icon for that, just create a ternary functions for the icons which are shown depending on the bound value. What you want doesn’t really sound like a checkbox to me, more like some sort of icon switch depending on an input.


#6

I find toggles easier to use on touchscreens than checkboxes, FWIW.


#7

ithink u r right i might create a function better and easier to maintain than changing the icon thanks for the suggestion