hi
is there a way to use custom icons with ionic check box in ionic3
or at least use one of ionic icons ?
regards
How exactly should that work? Should the icon replace the checkbox?
yes i want to use an icon for checked and another icon for unchecked without the checkbox
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;
}
}
}
1 Like
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.
1 Like
I find toggles easier to use on touchscreens than checkboxes, FWIW.
ithink u r right i might create a function better and easier to maintain than changing the icon thanks for the suggestion