igniteui-webcomponents-inputs 4.7.2 → 4.8.1-alpha.0

package/bundles/igniteui-webcomponents-inputs.umd.js

@@ -2201,7 +2201,6 @@
                 case "DisabledTextColor":
                 case "DisabledElevation":
                 case "HoverBackgroundColor":
-                case "TextStyle":
                 case "FocusTextColor":
                 case "TextColor":
                 case "HoverTextColor":
@@ -2307,6 +2306,7 @@
                     this.ap = this.disabled || this.at;
                     this.ki();
                     break;
+                case "TextStyle":
                 case "DisableHover":
                     this.kh();
                     break;
@@ -4997,30 +4997,30 @@
             c.l = this.disabled;
             if (this.aa != null) {
                 var g = this.aa;
-                if (this.view != null && g.p == null) {
+                if (this.view != null && g.q == null) {
                     var h = this.view.k;
                     var i = igniteuiWebcomponentsCore.FontUtil.getFontInfoFromString(h, g.fontString);
-                    g.p = i.p;
-                    g.e = i.e;
                     g.q = i.q;
-                    g.s = i.s;
+                    g.f = i.f;
+                    g.r = i.r;
                     g.t = i.t;
                     g.u = i.u;
+                    g.v = i.v;
                 }
-                if (g.p != null) {
-                    c.ac = g.p;
+                if (g.q != null) {
+                    c.ac = g.q;
                 }
-                if (!igniteuiWebcomponentsCore.isNaN_(g.e)) {
-                    c.r = g.e;
+                if (!igniteuiWebcomponentsCore.isNaN_(g.f)) {
+                    c.r = g.f;
                 }
-                if (g.u != null) {
-                    c.ag = g.u;
+                if (g.v != null) {
+                    c.ag = g.v;
                 }
-                if (g.s != null) {
-                    c.ae = g.s;
+                if (g.t != null) {
+                    c.ae = g.t;
                 }
-                if (g.q != null) {
-                    c.ad = g.s;
+                if (g.r != null) {
+                    c.ad = g.t;
                 }
             }
             return c;
@@ -5051,7 +5051,7 @@
                 $ret.addItem("HoverElevation", 4);
                 $ret.addItem("FocusElevation", 8);
                 $ret.addItem("BorderColor", igniteuiWebcomponentsCore.BrushUtil.h(138, 0, 0, 0));
-                $ret.addItem("RippleColor", igniteuiWebcomponentsCore.BrushUtil.h(255, 255, 255, 255));
+                $ret.addItem("RippleColor", igniteuiWebcomponentsCore.BrushUtil.h(138, 0, 0, 0));
                 $ret.addItem("CornerRadius", new igniteuiWebcomponentsCore.CornerRadius(0, 4));
                 $ret.addItem("BorderWidth", NaN);
                 $ret.addItem("BackgroundColor", igniteuiWebcomponentsCore.BrushUtil.h(255, 228, 28, 119));
@@ -5072,11 +5072,11 @@
                 $ret.addItem("HoverElevation", 0);
                 $ret.addItem("FocusElevation", 0);
                 $ret.addItem("BorderColor", igniteuiWebcomponentsCore.BrushUtil.h(138, 0, 0, 0));
-                $ret.addItem("RippleColor", null);
+                $ret.addItem("RippleColor", igniteuiWebcomponentsCore.BrushUtil.h(138, 0, 0, 0));
                 $ret.addItem("CornerRadius", new igniteuiWebcomponentsCore.CornerRadius(0, 4));
                 $ret.addItem("BorderWidth", NaN);
                 $ret.addItem("BackgroundColor", igniteuiWebcomponentsCore.BrushUtil.h(0, 0, 0, 0));
-                $ret.addItem("TextColor", igniteuiWebcomponentsCore.BrushUtil.h(255, 0, 0, 0));
+                $ret.addItem("TextColor", igniteuiWebcomponentsCore.BrushUtil.h(255, 228, 28, 119));
                 $ret.addItem("HoverTextColor", igniteuiWebcomponentsCore.BrushUtil.h(255, 228, 28, 119));
                 $ret.addItem("HoverBackgroundColor", igniteuiWebcomponentsCore.BrushUtil.h(13, 228, 28, 119));
                 $ret.addItem("FocusBackgroundColor", igniteuiWebcomponentsCore.BrushUtil.h(30, 228, 28, 119));
@@ -5092,8 +5092,8 @@
                 $ret.addItem("RestingElevation", 0);
                 $ret.addItem("HoverElevation", 0);
                 $ret.addItem("FocusElevation", 0);
-                $ret.addItem("BorderColor", igniteuiWebcomponentsCore.BrushUtil.h(30, 0, 0, 0));
-                $ret.addItem("RippleColor", igniteuiWebcomponentsCore.BrushUtil.h(0, 0, 0, 0));
+                $ret.addItem("BorderColor", igniteuiWebcomponentsCore.BrushUtil.h(255, 228, 28, 119));
+                $ret.addItem("RippleColor", igniteuiWebcomponentsCore.BrushUtil.h(138, 0, 0, 0));
                 $ret.addItem("CornerRadius", new igniteuiWebcomponentsCore.CornerRadius(0, 4));
                 $ret.addItem("BorderWidth", 1);
                 $ret.addItem("BackgroundColor", igniteuiWebcomponentsCore.BrushUtil.h(0, 0, 0, 0));
@@ -5114,7 +5114,7 @@
                 $ret.addItem("HoverElevation", 0);
                 $ret.addItem("FocusElevation", 0);
                 $ret.addItem("BorderColor", igniteuiWebcomponentsCore.BrushUtil.h(138, 0, 0, 0));
-                $ret.addItem("RippleColor", null);
+                $ret.addItem("RippleColor", igniteuiWebcomponentsCore.BrushUtil.h(138, 0, 0, 0));
                 $ret.addItem("CornerRadius", new igniteuiWebcomponentsCore.CornerRadius(0, 28));
                 $ret.addItem("BorderWidth", NaN);
                 $ret.addItem("BackgroundColor", igniteuiWebcomponentsCore.BrushUtil.h(0, 0, 0, 0));
@@ -5135,7 +5135,7 @@
                 $ret.addItem("HoverElevation", 12);
                 $ret.addItem("FocusElevation", 12);
                 $ret.addItem("BorderColor", igniteuiWebcomponentsCore.BrushUtil.h(138, 0, 0, 0));
-                $ret.addItem("RippleColor", igniteuiWebcomponentsCore.BrushUtil.h(255, 255, 255, 255));
+                $ret.addItem("RippleColor", igniteuiWebcomponentsCore.BrushUtil.h(138, 0, 0, 0));
                 $ret.addItem("CornerRadius", new igniteuiWebcomponentsCore.CornerRadius(0, 28));
                 $ret.addItem("BorderWidth", NaN);
                 $ret.addItem("BackgroundColor", igniteuiWebcomponentsCore.BrushUtil.h(255, 228, 28, 119));
@@ -8399,12 +8399,13 @@
             _this.b = null;
             _this.d = 0;
             _this._svgPath = null;
-            _this.n = null;
+            _this.j = null;
             _this.o = null;
             _this.p = null;
+            _this.q = null;
             _this.g = 0;
-            _this.l = null;
             _this.m = null;
+            _this.n = null;
             return _this;
         }
         Object.defineProperty(IconVisualModelExport.prototype, "svgPath", {
@@ -8417,7 +8418,7 @@
             enumerable: false,
             configurable: true
         });
-        IconVisualModelExport.prototype.j = function () {
+        IconVisualModelExport.prototype.k = function () {
             var a = new igniteuiWebcomponentsCore.StringBuilder(0);
             a.l("{");
             a.l("actualFill : " + this.a.serialize() + ", ");
@@ -8429,20 +8430,21 @@
             a.l("height : " + this.e + ", ");
             a.l("width : " + this.i + ", ");
             a.l("svgPath : '" + this.svgPath + "', ");
-            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.n)) {
-                a.l("textStyleFontStyle : \"" + this.n + "\", ");
-            }
+            a.l("dataURL : '" + this.j + "', ");
             if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.o)) {
-                a.l("textStyleFontVariant : \"" + this.o + "\", ");
+                a.l("textStyleFontStyle : \"" + this.o + "\", ");
             }
             if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.p)) {
-                a.l("textStyleFontWeight : \"" + this.p + "\", ");
+                a.l("textStyleFontVariant : \"" + this.p + "\", ");
             }
-            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.l)) {
-                a.l("textStyleFontFamily : \"" + this.l + "\", ");
+            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.q)) {
+                a.l("textStyleFontWeight : \"" + this.q + "\", ");
             }
             if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.m)) {
-                a.l("textStyleFontStretch : \"" + this.m + "\", ");
+                a.l("textStyleFontFamily : \"" + this.m + "\", ");
+            }
+            if (!igniteuiWebcomponentsCore.stringIsNullOrEmpty(this.n)) {
+                a.l("textStyleFontStretch : \"" + this.n + "\", ");
             }
             if (!igniteuiWebcomponentsCore.isNaN_(this.g)) {
                 a.l("textStyleFontSize : " + this.g + ", ");
@@ -8467,62 +8469,74 @@
         tslib.__extends(IconView, _super);
         function IconView() {
             var _this = _super.call(this) || this;
-            _this.b = null;
-            _this.o = null;
-            _this.e = null;
-            _this.i = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Delegate_$type, 0);
-            _this.j = null;
-            _this.k = null;
-            _this.l = null;
-            _this.m = null;
-            _this.n = null;
-            _this.c = null;
             _this.d = null;
-            _this.u = null;
             _this.t = null;
-            _this.f = true;
+            _this.g = null;
+            _this.m = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Delegate_$type, 0);
+            _this.o = null;
             _this.p = null;
             _this.q = null;
-            _this.j = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Tuple$2.$.specialize(igniteuiWebcomponentsCore.SVGNode.$, igniteuiWebcomponentsCore.Base.$), 0);
-            _this.k = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Tuple$2.$.specialize(igniteuiWebcomponentsCore.SVGNode.$, igniteuiWebcomponentsCore.Base.$), 0);
-            _this.l = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Tuple$2.$.specialize(igniteuiWebcomponentsCore.SVGNode.$, igniteuiWebcomponentsCore.Base.$), 0);
-            _this.m = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Tuple$2.$.specialize(igniteuiWebcomponentsCore.SVGNode.$, igniteuiWebcomponentsCore.Base.$), 0);
-            _this.n = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Tuple$2.$.specialize(igniteuiWebcomponentsCore.SVGNode.$, igniteuiWebcomponentsCore.Base.$), 0);
-            _this.c = new igniteuiWebcomponentsCore.FastIterationDictionary$2(igniteuiWebcomponentsCore.String_$type, igniteuiWebcomponentsCore.List$1.$.specialize(igniteuiWebcomponentsCore.Tuple$2.$.specialize(igniteuiWebcomponentsCore.SVGNode.$, igniteuiWebcomponentsCore.Base.$)), 0);
-            _this.d = new igniteuiWebcomponentsCore.FastIterationDictionary$2(igniteuiWebcomponentsCore.String_$type, igniteuiWebcomponentsCore.List$1.$.specialize(igniteuiWebcomponentsCore.Tuple$2.$.specialize(igniteuiWebcomponentsCore.SVGNode.$, igniteuiWebcomponentsCore.Base.$)), 0);
+            _this.r = null;
+            _this.s = null;
+            _this.e = null;
+            _this.f = null;
+            _this.ab = null;
+            _this.a = null;
+            _this.aa = null;
+            _this.z = null;
+            _this.l = new igniteuiWebcomponentsCore.Dictionary$2(igniteuiWebcomponentsCore.Brush.$, igniteuiWebcomponentsCore.String_$type, 0);
+            _this.h = true;
+            _this.w = null;
+            _this.v = null;
+            _this.u = null;
+            _this.n = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.DomWrapper_$type, 0);
+            _this.o = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Tuple$2.$.specialize(igniteuiWebcomponentsCore.SVGNode.$, igniteuiWebcomponentsCore.Base.$), 0);
+            _this.p = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Tuple$2.$.specialize(igniteuiWebcomponentsCore.SVGNode.$, igniteuiWebcomponentsCore.Base.$), 0);
+            _this.q = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Tuple$2.$.specialize(igniteuiWebcomponentsCore.SVGNode.$, igniteuiWebcomponentsCore.Base.$), 0);
+            _this.r = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Tuple$2.$.specialize(igniteuiWebcomponentsCore.SVGNode.$, igniteuiWebcomponentsCore.Base.$), 0);
+            _this.s = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.Tuple$2.$.specialize(igniteuiWebcomponentsCore.SVGNode.$, igniteuiWebcomponentsCore.Base.$), 0);
+            _this.e = new igniteuiWebcomponentsCore.FastIterationDictionary$2(igniteuiWebcomponentsCore.String_$type, igniteuiWebcomponentsCore.List$1.$.specialize(igniteuiWebcomponentsCore.Tuple$2.$.specialize(igniteuiWebcomponentsCore.SVGNode.$, igniteuiWebcomponentsCore.Base.$)), 0);
+            _this.f = new igniteuiWebcomponentsCore.FastIterationDictionary$2(igniteuiWebcomponentsCore.String_$type, igniteuiWebcomponentsCore.List$1.$.specialize(igniteuiWebcomponentsCore.Tuple$2.$.specialize(igniteuiWebcomponentsCore.SVGNode.$, igniteuiWebcomponentsCore.Base.$)), 0);
             return _this;
         }
-        IconView.prototype.ac = function () {
+        IconView.prototype.aj = function () {
         };
-        IconView.prototype.g = function () {
+        IconView.prototype.j = function () {
             return true;
         };
-        Object.defineProperty(IconView.prototype, "r", {
+        Object.defineProperty(IconView.prototype, "x", {
             get: function () {
-                return this.p;
+                return this.w;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IconView.prototype, "s", {
+        Object.defineProperty(IconView.prototype, "y", {
             get: function () {
                 return null;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(IconView.prototype, "h", {
+        Object.defineProperty(IconView.prototype, "c", {
+            get: function () {
+                return this.n.toArray();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IconView.prototype, "k", {
             get: function () {
                 return true;
             },
             enumerable: false,
             configurable: true
         });
-        IconView.prototype.aa = function (a) {
+        IconView.prototype.ah = function (a) {
             var e_1, _a;
             if (a == null) {
                 try {
-                    for (var _b = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.i)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    for (var _b = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.m)), _c = _b.next(); !_c.done; _c = _b.next()) {
                         var b = _c.value;
                         b();
                     }
@@ -8540,84 +8554,177 @@
                             throw e_1.error;
                     }
                 }
-                this.i.clear();
-                if (this.p != null) {
-                    this.p.unlistenAll();
+                this.m.clear();
+                if (this.w != null) {
+                    this.w.unlistenAll();
+                }
+                if (this.v != null) {
+                    this.v.unlistenAll();
                 }
             }
-            this.o = a;
+            this.t = a;
             a.rootWrapper.setStyleProperty("position", "relative");
-            this.o.rootWrapper.setStyleProperty("display", "flex");
-            this.o.rootWrapper.setStyleProperty("flex-direction", "row");
-            this.o.rootWrapper.setStyleProperty("flex-wrap", "no-wrap");
-            this.o.rootWrapper.setStyleProperty("align-items", "center");
-            this.ae();
-            var c = this.o.createElementNS("svg", "http://www.w3.org/2000/svg");
+            this.t.rootWrapper.setStyleProperty("display", "flex");
+            this.t.rootWrapper.setStyleProperty("flex-direction", "row");
+            this.t.rootWrapper.setStyleProperty("flex-wrap", "no-wrap");
+            this.t.rootWrapper.setStyleProperty("align-items", "center");
+            this.t.rootWrapper.setStyleProperty("justify-content", "center");
+            this.ap();
+            var c = this.t.createElementNS("svg", "http://www.w3.org/2000/svg");
             c.setStyleProperty("position", "absolute");
             c.setStyleProperty("top", "0");
             c.setStyleProperty("left", "0");
             c.setStyleProperty("right", "0");
             c.setStyleProperty("bottom", "0");
-            this.p = c;
-            this.ai();
-            var d = this.o.createElementNS("path", "http://www.w3.org/2000/svg");
-            d.setAttribute("d", "");
-            this.p.append(d);
-            if (this.u != null) {
-                d.setAttribute("d", this.u);
-            }
-            this.q = d;
-            this.o.append(this.p);
-            this.i.add(c.listen("click", igniteuiWebcomponentsCore.runOn(this, this.z)));
-            this.b.b6();
-        };
-        IconView.prototype.ag = function (a) {
-            if (this.u != a) {
-                this.u = a;
-                this.o.rootWrapper.removeChildren();
-                this.o.rootWrapper.append(this.p);
-                if (this.q != null) {
-                    this.q.setAttribute("d", this.u);
+            this.w = c;
+            var d = this.t.createElement("img");
+            d.setStyleProperty("height", "100%");
+            d.setStyleProperty("width", "100%");
+            d.setStyleProperty("object-fit", "contain");
+            this.v = d;
+            this.au();
+            this.u = a.createElementNS("defs", "http://www.w3.org/2000/svg");
+            this.w.append(this.u);
+            this.t.append(this.w);
+            this.m.add(c.listen("click", igniteuiWebcomponentsCore.runOn(this, this.ag)));
+            this.d.cc();
+        };
+        IconView.prototype.ar = function (a) {
+            this.l.clear();
+            if (this.ab != a) {
+                this.ab = a;
+                this.t.rootWrapper.removeChildren();
+                this.t.rootWrapper.append(this.w);
+                this.w.removeChildren();
+                this.u.removeChildren();
+                this.n.clear();
+                var b = this.t.createElementNS("path", "http://www.w3.org/2000/svg");
+                b.setAttribute("d", this.ab);
+                this.w.append(this.u);
+                this.w.append(b);
+                this.n.add(b);
+            }
+        };
+        IconView.prototype.as = function (a) {
+            this.l.clear();
+            if (this.a != a) {
+                this.a = a;
+                this.t.rootWrapper.removeChildren();
+                this.t.rootWrapper.append(this.w);
+                this.w.removeChildren();
+                this.u.removeChildren();
+                this.n.clear();
+                if (this.a != null && this.a.length > 0) {
+                    this.w.append(this.u);
+                    for (var b = 0; b < this.a.length; b++) {
+                        var c = this.t.createElementNS("path", "http://www.w3.org/2000/svg");
+                        c.setAttribute("d", this.a[b]);
+                        this.w.append(c);
+                        this.n.add(c);
+                    }
                 }
             }
         };
-        IconView.prototype.af = function (a) {
-            if (this.t != a) {
-                this.t = a;
-                this.o.rootWrapper.removeChildren();
-                var b = this.o.rootWrapper.getNativeElement();
-                b.innerHTML = this.t;
+        IconView.prototype.aq = function (a) {
+            if (this.aa != a) {
+                this.aa = a;
+                this.t.rootWrapper.removeChildren();
+                var b = this.t.rootWrapper.getNativeElement();
+                b.innerHTML = this.aa;
             }
         };
-        IconView.prototype.ae = function () {
-            this.o.rootWrapper.setStyleProperty("width", igniteuiWebcomponentsCore.isNaN_(this.b.ao) ? "1.5rem" : this.b.ao + "px");
-            this.o.rootWrapper.setStyleProperty("height", igniteuiWebcomponentsCore.isNaN_(this.b.ag) ? "1.5rem" : this.b.ag + "px");
+        IconView.prototype.ao = function (a) {
+            if (this.z != a) {
+                this.z = a;
+                this.t.rootWrapper.removeChildren();
+                this.t.rootWrapper.append(this.v);
+                this.v.setAttribute("src", a);
+            }
+        };
+        IconView.prototype.i = function () {
+            return this.d.svgPath != null || this.d.svg != null || this.d.b != null;
+        };
+        IconView.prototype.ap = function () {
+            this.t.rootWrapper.setStyleProperty("width", igniteuiWebcomponentsCore.isNaN_(this.d.aq) ? "1.5rem" : this.d.aq + "px");
+            this.t.rootWrapper.setStyleProperty("height", igniteuiWebcomponentsCore.isNaN_(this.d.ai) ? "1.5rem" : this.d.ai + "px");
+        };
+        IconView.prototype.au = function () {
+            var a = igniteuiWebcomponentsCore.isNaN_(this.d.an) ? 0 : this.d.an;
+            var b = igniteuiWebcomponentsCore.isNaN_(this.d.ao) ? 0 : this.d.ao;
+            var c = igniteuiWebcomponentsCore.isNaN_(this.d.ap) ? 24 : this.d.ap;
+            var d = igniteuiWebcomponentsCore.isNaN_(this.d.am) ? 24 : this.d.am;
+            this.w.setAttribute("viewBox", a + " " + b + " " + c + " " + d);
+        };
+        IconView.prototype.al = function (a, b) {
+            var c = a.color;
+            if (!this.l.containsKey(a)) {
+                if (a.isGradient) {
+                    var d = this.u.getChildCount();
+                    var e = a;
+                    var f = this.t.createElementNS("linearGradient", "http://www.w3.org/2000/svg");
+                    var g = "ig_gradient_" + b + "_" + d;
+                    f.setAttribute("id", g);
+                    f.setAttribute("x1", e.startX.toString());
+                    f.setAttribute("x2", e.endX.toString());
+                    f.setAttribute("y1", e.startY.toString());
+                    f.setAttribute("y2", e.endY.toString());
+                    var j = e.gradientStops;
+                    for (var i = 0; i < j.length; i++) {
+                        var h = j[i];
+                        var k = this.t.createElementNS("stop", "http://www.w3.org/2000/svg");
+                        k.setAttribute("offset", h.offset * 100 + "%");
+                        k.setAttribute("stop-color", h._fill);
+                        f.append(k);
+                    }
+                    this.u.append(f);
+                    this.l.addItem(a, g);
+                }
+                else if (a.isRadialGradient) {
+                }
+            }
+        };
+        IconView.prototype.am = function (a, b) {
+            var c = a;
+            if (this.l.containsKey(b)) {
+                c.setAttribute("fill", "url(#" + this.l.item(b) + ")");
+                this.t.rootWrapper.removeChildren();
+                this.t.rootWrapper.append(this.w);
+            }
+            else {
+                igniteuiWebcomponentsCore.NativeUI.r(a, b);
+            }
         };
-        IconView.prototype.ai = function () {
-            this.p.setAttribute("viewBox", (igniteuiWebcomponentsCore.isNaN_(this.b.al) ? 0 : this.b.al) + " " + (igniteuiWebcomponentsCore.isNaN_(this.b.am) ? 0 : this.b.am) + " " + (igniteuiWebcomponentsCore.isNaN_(this.b.an) ? 24 : this.b.an) + " " + (igniteuiWebcomponentsCore.isNaN_(this.b.ak) ? 24 : this.b.ak));
+        IconView.prototype.an = function (a, b) {
+            var c = a;
+            if (this.l.containsKey(b)) {
+                c.setAttribute("stroke", "url('#" + this.l.item(b) + "')");
+            }
+            else {
+                igniteuiWebcomponentsCore.NativeUI.aa(a, b);
+            }
         };
-        IconView.prototype.v = function (a) {
+        IconView.prototype.ac = function (a) {
         };
-        IconView.prototype.ad = function () {
-            if (this.g()) {
+        IconView.prototype.ak = function () {
+            if (this.j()) {
             }
         };
-        IconView.prototype.w = function (a) {
-            this.b.b3();
+        IconView.prototype.ad = function (a) {
+            this.d.b9();
         };
-        IconView.prototype.x = function (a) {
-            this.b.b4();
+        IconView.prototype.ae = function (a) {
+            this.d.ca();
         };
-        IconView.prototype.y = function () {
-            this.f = true;
-            this.i.add(this.o.rootWrapper.listen("mouseenter", igniteuiWebcomponentsCore.runOn(this, this.w)));
-            this.i.add(this.o.rootWrapper.listen("mouseleave", igniteuiWebcomponentsCore.runOn(this, this.x)));
+        IconView.prototype.af = function () {
+            this.h = true;
+            this.m.add(this.t.rootWrapper.listen("mouseenter", igniteuiWebcomponentsCore.runOn(this, this.ad)));
+            this.m.add(this.t.rootWrapper.listen("mouseleave", igniteuiWebcomponentsCore.runOn(this, this.ae)));
         };
-        IconView.prototype.ab = function () {
+        IconView.prototype.ai = function () {
             var e_2, _a;
-            this.f = false;
+            this.h = false;
             try {
-                for (var _b = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.i)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                for (var _b = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.m)), _c = _b.next(); !_c.done; _c = _b.next()) {
                     var a = _c.value;
                     a();
                 }
@@ -8635,15 +8742,15 @@
                         throw e_2.error;
                 }
             }
-            this.i.clear();
+            this.m.clear();
         };
-        IconView.prototype.ah = function (a) {
+        IconView.prototype.at = function (a) {
             if (a != null) {
-                this.o.rootWrapper.setStyleProperty("font", a.fontString);
+                this.t.rootWrapper.setStyleProperty("font", a.fontString);
             }
         };
-        IconView.prototype.a = function () {
-            var rect_ = this.o.rootWrapper.getNativeElement().getBoundingClientRect();
+        IconView.prototype.b = function () {
+            var rect_ = this.t.rootWrapper.getNativeElement().getBoundingClientRect();
             var a = (rect_.top);
             var b = (rect_.left);
             var c = new Array(2);
@@ -8651,8 +8758,8 @@
             c[1] = b;
             return c;
         };
-        IconView.prototype.z = function (a) {
-            this.b.b1();
+        IconView.prototype.ag = function (a) {
+            this.d.b7();
         };
         IconView.$t = igniteuiWebcomponentsCore.markType(IconView, 'IconView');
         return IconView;
@@ -8665,47 +8772,49 @@
         function XIcon() {
             var _this = _super.call(this) || this;
             _this._view = null;
-            _this.h = 0;
-            _this.cc = XIcon.cs;
-            _this.cd = XIcon.cw;
-            _this.ce = XIcon.cx;
-            _this.t = XIcon.af;
-            _this.cf = XIcon.cs;
-            _this.cn = XIcon.cw;
-            _this.x = XIcon.af;
-            _this.co = XIcon.cx;
-            _this.cg = XIcon.ct;
-            _this.ch = XIcon.cu;
-            _this.v = XIcon.ae;
-            _this.ci = null;
-            _this.a = null;
-            _this.b = null;
-            _this.cj = null;
-            _this.ck = null;
-            _this.cl = null;
-            _this.cm = null;
+            _this.j = 0;
+            _this.cj = XIcon.cz;
+            _this.ck = XIcon.c3;
+            _this.cl = XIcon.c4;
+            _this.v = XIcon.ah;
+            _this.cm = XIcon.cz;
+            _this.cu = XIcon.c3;
+            _this.z = XIcon.ah;
+            _this.cv = XIcon.c4;
+            _this.cn = XIcon.c0;
+            _this.co = XIcon.c1;
+            _this.x = XIcon.ag;
+            _this.cp = null;
+            _this.c = null;
+            _this.d = null;
+            _this.cq = null;
+            _this.cr = null;
+            _this.cs = null;
+            _this.ct = null;
             _this.aw = null;
-            _this.av = null;
-            _this.j = null;
-            _this.au = "ig-icon-" + XIcon.ar++;
-            _this.ap = 0;
-            _this.l = false;
-            _this.at = null;
+            _this.az = null;
+            _this.ay = null;
+            _this.a = null;
+            _this.l = null;
+            _this.ax = "ig-icon-" + XIcon.at++;
+            _this.ar = 0;
             _this.n = false;
-            _this.m = false;
-            _this.w = 1;
-            _this.z = NaN;
-            _this.aa = NaN;
+            _this.av = null;
+            _this.p = false;
+            _this.o = false;
+            _this.y = 1;
             _this.ab = NaN;
-            _this.y = NaN;
             _this.ac = NaN;
-            _this.u = NaN;
+            _this.ad = NaN;
+            _this.aa = NaN;
+            _this.ae = NaN;
+            _this.w = NaN;
             _this.clicked = null;
             _this.propertyChanged = null;
             var a = new IconView();
-            a.b = _this;
+            a.d = _this;
             _this.view = a;
-            _this.view.ac();
+            _this.view.aj();
             return _this;
         }
         Object.defineProperty(XIcon.prototype, "view", {
@@ -8721,13 +8830,13 @@
         XIcon.prototype.destroy = function () {
             this.provideContainer(null);
         };
-        XIcon.prototype.b5 = function (a, b, c) {
+        XIcon.prototype.cb = function (a, b, c) {
             if (this.propertyChanged != null) {
                 this.propertyChanged(this, new igniteuiWebcomponentsCore.PropertyChangedEventArgs(a));
             }
-            this.b7(a, b, c);
+            this.ce(a, b, c);
         };
-        XIcon.prototype.b7 = function (a, b, c) {
+        XIcon.prototype.ce = function (a, b, c) {
             switch (a) {
                 case "Fill":
                 case "Stroke":
@@ -8736,355 +8845,252 @@
                 case "HoverStroke":
                 case "HoverStrokeThickness":
                 case "IsHover":
-                    this.cb();
+                    this.ci();
                     break;
+                case "FillColors":
+                case "StrokeColors":
                 case "ActualFill":
                 case "ActualStroke":
                 case "ActualStrokeWidth":
                 case "SVGPath":
+                case "SVGPaths":
                 case "SVG":
-                    this.b9();
+                case "DataURL":
+                    this.cg();
                     break;
                 case "Opacity":
-                    this.ca();
+                    this.ch();
                     break;
                 case "ViewBoxLeft":
                 case "ViewBoxTop":
                 case "ViewBoxWidth":
                 case "ViewBoxHeight":
-                    this.view.ai();
+                    this.view.au();
                     break;
                 case "Width":
                 case "Height":
-                    this.view.ae();
+                    this.view.ap();
                     break;
             }
         };
-        XIcon.prototype.cb = function () {
-            var a = this.fill != null ? this.fill : XIcon.cs;
-            var b = this.c5 != null ? this.c5 : XIcon.cw;
-            var c = !igniteuiWebcomponentsCore.isNaN_(this.aj) ? this.aj : XIcon.af;
-            var d = this.c6 != null ? this.c6 : XIcon.cx;
-            if (this.r) {
-                this.cp = this.cy != null ? this.cy : a;
-                this.cq = this.cz != null ? this.cz : b;
-                this.ad = !igniteuiWebcomponentsCore.isNaN_(this.ah) ? this.ah : c;
-                this.cr = this.c0 != null ? this.c0 : d;
+        XIcon.prototype.ci = function () {
+            var a = this.fill != null ? this.fill : XIcon.cz;
+            var b = this.dc != null ? this.dc : XIcon.c3;
+            var c = !igniteuiWebcomponentsCore.isNaN_(this.al) ? this.al : XIcon.ah;
+            var d = this.dd != null ? this.dd : XIcon.c4;
+            if (this.t) {
+                this.cw = this.c5 != null ? this.c5 : a;
+                this.cx = this.c6 != null ? this.c6 : b;
+                this.af = !igniteuiWebcomponentsCore.isNaN_(this.aj) ? this.aj : c;
+                this.cy = this.c7 != null ? this.c7 : d;
             }
             else {
-                this.cp = a;
-                this.cq = b;
-                this.ad = c;
-                this.cr = d;
+                this.cw = a;
+                this.cx = b;
+                this.af = c;
+                this.cy = d;
             }
         };
-        Object.defineProperty(XIcon.prototype, "p", {
+        Object.defineProperty(XIcon.prototype, "r", {
             get: function () {
-                return this.svgPath != null && !this.view.h;
+                return this.svgPath != null && !this.view.k;
             },
             enumerable: false,
             configurable: true
         });
-        XIcon.prototype.ca = function () {
-            igniteuiWebcomponentsCore.NativeUI.y(this.view.r, this.ai);
+        XIcon.prototype.ch = function () {
+            igniteuiWebcomponentsCore.NativeUI.y(this.view.x, this.ak);
         };
-        XIcon.prototype.b9 = function () {
-            var a = this.view.r;
-            if (this.p) {
-                var b = this.view.s;
-                igniteuiWebcomponentsCore.NativeUI.r(b, this.cp);
-                igniteuiWebcomponentsCore.NativeUI.aa(b, this.cq);
-                igniteuiWebcomponentsCore.NativeUI.ad(b, this.ad);
+        XIcon.prototype.cg = function () {
+            var a = this.view.x;
+            if (this.r) {
+                var b = this.view.y;
+                igniteuiWebcomponentsCore.NativeUI.r(b, this.cw);
+                igniteuiWebcomponentsCore.NativeUI.aa(b, this.cx);
+                igniteuiWebcomponentsCore.NativeUI.ad(b, this.af);
             }
             else {
                 var c = false;
                 if (this.svgPath != null) {
                     if (igniteuiWebcomponentsCore.stringStartsWith(igniteuiWebcomponentsCore.trimStart(this.svgPath, ' ', '\n', '\r', '\t'), "<svg")) {
-                        this.view.af(this.svgPath);
+                        this.view.aq(this.svgPath);
                         c = true;
                     }
                     else {
-                        this.view.ag(this.svgPath);
+                        this.view.ar(this.svgPath);
+                    }
+                }
+                else if (this.b != null) {
+                    this.view.as(this.b);
+                    var d = this.view.c;
+                    if (d != null && d.length > 0) {
+                        var e = igniteuiWebcomponentsCore.NativeUI.r;
+                        var f = igniteuiWebcomponentsCore.NativeUI.aa;
+                        this.cd();
+                        e = igniteuiWebcomponentsCore.runOn(this.view, this.view.am);
+                        f = igniteuiWebcomponentsCore.runOn(this.view, this.view.an);
+                        for (var g = 0; g < d.length; g++) {
+                            if (this.cw != null) {
+                                e(d[g], this.cw);
+                            }
+                            if (this.cx != null) {
+                                f(d[g], this.cx);
+                            }
+                            if (!igniteuiWebcomponentsCore.isNaN_(this.af)) {
+                                igniteuiWebcomponentsCore.NativeUI.ad(d[g], this.af);
+                            }
+                            if (this.cy != null) {
+                                igniteuiWebcomponentsCore.NativeUI.q(d[g], this.cy);
+                            }
+                            if (this.e != null && this.e.count == d.length) {
+                                e(d[g], this.e.item(g));
+                            }
+                            if (this.f != null && this.f.count == d.length) {
+                                f(d[g], this.f.item(g));
+                            }
+                        }
+                    }
+                    if (this.m != null) {
+                        this.view.at(this.m);
                     }
+                    return;
                 }
                 else if (this.svg != null) {
-                    this.view.af(this.svg);
+                    this.view.aq(this.svg);
                     c = true;
                 }
+                else if (this.a7 != null) {
+                    this.view.ao(this.a7);
+                }
                 if (c) {
-                    for (var d = 0; d < this.view.k.count; d++) {
-                        var e = this.view.k._inner[d].c;
-                        igniteuiWebcomponentsCore.NativeUI.r(this.view.k._inner[d].d, e.l.f(this.c1));
-                    }
-                    for (var f = 0; f < this.view.l.count; f++) {
-                        var g = this.view.l._inner[f].c;
-                        igniteuiWebcomponentsCore.NativeUI.aa(this.view.l._inner[f].d, g.m.f(this.c2));
-                    }
-                    for (var h = 0; h < this.view.m.count; h++) {
-                        var i = this.view.m._inner[h].c;
-                        igniteuiWebcomponentsCore.NativeUI.r(this.view.m._inner[h].d, i.l.f(this.c3));
-                    }
-                    for (var j = 0; j < this.view.n.count; j++) {
-                        var k = this.view.n._inner[j].c;
-                        igniteuiWebcomponentsCore.NativeUI.aa(this.view.n._inner[j].d, k.m.f(this.c4));
-                    }
-                    for (var l = 0; l < this.view.c.o.count; l++) {
-                        var m = this.view.c.o._inner[l];
-                        var n = m.split('-');
-                        var o = parseInt(n[n.length - 1]);
-                        if (o < this.c.count) {
-                            for (var p = 0; p < this.view.c.q._inner[l].count; p++) {
-                                var q = this.view.c.q._inner[l]._inner[p].c;
-                                igniteuiWebcomponentsCore.NativeUI.r(this.view.c.q._inner[l]._inner[p].d, q.l.f(this.c.item(o)));
+                    for (var h = 0; h < this.view.p.count; h++) {
+                        var i = this.view.p._inner[h].c;
+                        igniteuiWebcomponentsCore.NativeUI.r(this.view.p._inner[h].d, i.l.f(this.c8));
+                    }
+                    for (var j = 0; j < this.view.q.count; j++) {
+                        var k = this.view.q._inner[j].c;
+                        igniteuiWebcomponentsCore.NativeUI.aa(this.view.q._inner[j].d, k.m.f(this.c9));
+                    }
+                    for (var l = 0; l < this.view.r.count; l++) {
+                        var m = this.view.r._inner[l].c;
+                        igniteuiWebcomponentsCore.NativeUI.r(this.view.r._inner[l].d, m.l.f(this.da));
+                    }
+                    for (var n = 0; n < this.view.s.count; n++) {
+                        var o = this.view.s._inner[n].c;
+                        igniteuiWebcomponentsCore.NativeUI.aa(this.view.s._inner[n].d, o.m.f(this.db));
+                    }
+                    for (var p = 0; p < this.view.e.o.count; p++) {
+                        var q = this.view.e.o._inner[p];
+                        var r = q.split('-');
+                        var s = parseInt(r[r.length - 1]);
+                        if (s < this.e.count) {
+                            for (var t = 0; t < this.view.e.q._inner[p].count; t++) {
+                                var u = this.view.e.q._inner[p]._inner[t].c;
+                                igniteuiWebcomponentsCore.NativeUI.r(this.view.e.q._inner[p]._inner[t].d, u.l.f(this.e.item(s)));
                             }
                         }
                     }
-                    for (var r = 0; r < this.view.d.o.count; r++) {
-                        var s = this.view.d.o._inner[r];
-                        var t = s.split('-');
-                        var u = parseInt(t[t.length - 1]);
-                        if (u < this.d.count) {
-                            for (var v = 0; v < this.view.d.q._inner[r].count; v++) {
-                                var w = this.view.d.q._inner[r]._inner[v].c;
-                                igniteuiWebcomponentsCore.NativeUI.aa(this.view.d.q._inner[r]._inner[v].d, w.m.f(this.d.item(u)));
+                    for (var v = 0; v < this.view.f.o.count; v++) {
+                        var w = this.view.f.o._inner[v];
+                        var x = w.split('-');
+                        var y = parseInt(x[x.length - 1]);
+                        if (y < this.f.count) {
+                            for (var z = 0; z < this.view.f.q._inner[v].count; z++) {
+                                var aa = this.view.f.q._inner[v]._inner[z].c;
+                                igniteuiWebcomponentsCore.NativeUI.aa(this.view.f.q._inner[v]._inner[z].d, aa.m.f(this.f.item(y)));
                             }
                         }
                     }
-                    for (var x = 0; x < this.view.j.count; x++) {
-                        var y = this.view.j._inner[x].c;
-                        igniteuiWebcomponentsCore.NativeUI.r(this.view.j._inner[x].d, y.l.f(this.cp));
-                        igniteuiWebcomponentsCore.NativeUI.aa(this.view.j._inner[x].d, y.m.f(this.cq));
+                    for (var ab = 0; ab < this.view.o.count; ab++) {
+                        var ac = this.view.o._inner[ab].c;
+                        igniteuiWebcomponentsCore.NativeUI.r(this.view.o._inner[ab].d, ac.l.f(this.cw));
+                        igniteuiWebcomponentsCore.NativeUI.aa(this.view.o._inner[ab].d, ac.m.f(this.cx));
                     }
                 }
-                var z = this.view.r;
-                if (this.cp != null) {
-                    igniteuiWebcomponentsCore.NativeUI.r(z, this.cp);
+                var ad = this.view.x;
+                if (this.cw != null) {
+                    igniteuiWebcomponentsCore.NativeUI.r(ad, this.cw);
                 }
-                if (this.cq != null) {
-                    igniteuiWebcomponentsCore.NativeUI.aa(z, this.cq);
+                if (this.cx != null) {
+                    igniteuiWebcomponentsCore.NativeUI.aa(ad, this.cx);
                 }
-                if (!igniteuiWebcomponentsCore.isNaN_(this.ad)) {
-                    igniteuiWebcomponentsCore.NativeUI.ad(z, this.ad);
+                if (!igniteuiWebcomponentsCore.isNaN_(this.af)) {
+                    igniteuiWebcomponentsCore.NativeUI.ad(ad, this.af);
                 }
             }
-            if (this.k != null) {
-                this.view.ah(this.k);
+            if (this.m != null) {
+                this.view.at(this.m);
             }
-            if (this.cr != null) {
-                igniteuiWebcomponentsCore.NativeUI.q(this.view.r, this.cr);
+            if (this.cy != null) {
+                igniteuiWebcomponentsCore.NativeUI.q(this.view.x, this.cy);
             }
         };
-        Object.defineProperty(XIcon.prototype, "i", {
-            get: function () {
-                return this.h;
-            },
-            set: function (a) {
-                var b = this.h;
-                this.h = a;
-                if (b != this.h) {
-                    this.b5("BaseTheme", igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.BaseControlTheme_$type, b), igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.BaseControlTheme_$type, a));
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(XIcon.prototype, "cp", {
-            get: function () {
-                return this.cc;
-            },
-            set: function (a) {
-                var b = this.cc;
-                this.cc = a;
-                if (b != this.cc) {
-                    this.b5("ActualFill", b, a);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(XIcon.prototype, "cq", {
-            get: function () {
-                return this.cd;
-            },
-            set: function (a) {
-                var b = this.cd;
-                this.cd = a;
-                if (b != this.cd) {
-                    this.b5("ActualStroke", b, a);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(XIcon.prototype, "cr", {
-            get: function () {
-                return this.ce;
-            },
-            set: function (a) {
-                var b = this.ce;
-                this.ce = a;
-                if (b != this.ce) {
-                    this.b5("ActualTextColor", b, a);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(XIcon.prototype, "ad", {
-            get: function () {
-                return this.t;
-            },
-            set: function (a) {
-                var b = this.t;
-                this.t = a;
-                if (b != this.t) {
-                    this.b5("ActualStrokeWidth", b, a);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(XIcon.prototype, "fill", {
-            get: function () {
-                return this.cf;
-            },
-            set: function (a) {
-                var b = this.cf;
-                this.cf = a;
-                if (b != this.cf) {
-                    this.b5("Fill", b, a);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(XIcon.prototype, "c5", {
-            get: function () {
-                return this.cn;
-            },
-            set: function (a) {
-                var b = this.cn;
-                this.cn = a;
-                if (b != this.cn) {
-                    this.b5("Stroke", b, a);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(XIcon.prototype, "aj", {
-            get: function () {
-                return this.x;
-            },
-            set: function (a) {
-                var b = this.x;
-                this.x = a;
-                if (b != this.x) {
-                    this.b5("StrokeWidth", b, a);
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(XIcon.prototype, "c6", {
-            get: function () {
-                return this.co;
-            },
-            set: function (a) {
-                var b = this.co;
-                this.co = a;
-                if (b != this.co) {
-                    this.b5("TextColor", b, a);
+        XIcon.prototype.cd = function () {
+            var e_3, _a, e_4, _b;
+            if (this.cw != null) {
+                this.view.al(this.cw, "fill");
+            }
+            if (this.cx != null) {
+                this.view.al(this.cx, "stroke");
+            }
+            if (this.e != null) {
+                try {
+                    for (var _c = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.e)), _d = _c.next(); !_d.done; _d = _c.next()) {
+                        var a = _d.value;
+                        this.view.al(a, "fills");
+                    }
                 }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(XIcon.prototype, "cy", {
-            get: function () {
-                return this.cg;
-            },
-            set: function (a) {
-                var b = this.cg;
-                this.cg = a;
-                if (b != this.cg) {
-                    this.b5("HoverFill", b, a);
+                catch (e_3_1) {
+                    e_3 = { error: e_3_1 };
                 }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(XIcon.prototype, "cz", {
-            get: function () {
-                return this.ch;
-            },
-            set: function (a) {
-                var b = this.ch;
-                this.ch = a;
-                if (b != this.ch) {
-                    this.b5("HoverStroke", b, a);
+                finally {
+                    try {
+                        if (_d && !_d.done && (_a = _c.return))
+                            _a.call(_c);
+                    }
+                    finally {
+                        if (e_3)
+                            throw e_3.error;
+                    }
                 }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(XIcon.prototype, "ah", {
-            get: function () {
-                return this.v;
-            },
-            set: function (a) {
-                var b = this.v;
-                this.v = a;
-                if (b != this.v) {
-                    this.b5("HoverStrokeThickness", b, a);
+            }
+            if (this.f != null) {
+                try {
+                    for (var _e = tslib.__values(igniteuiWebcomponentsCore.fromEnum(this.f)), _f = _e.next(); !_f.done; _f = _e.next()) {
+                        var b = _f.value;
+                        this.view.al(b, "strokes");
+                    }
                 }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(XIcon.prototype, "c0", {
-            get: function () {
-                return this.ci;
-            },
-            set: function (a) {
-                var b = this.ci;
-                this.ci = a;
-                if (b != this.ci) {
-                    this.b5("HoverTextColor", b, a);
+                catch (e_4_1) {
+                    e_4 = { error: e_4_1 };
                 }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(XIcon.prototype, "c", {
-            get: function () {
-                return this.a;
-            },
-            set: function (a) {
-                var b = this.a;
-                this.a = a;
-                if (b != this.a) {
-                    this.b5("FillColors", b, this.a);
+                finally {
+                    try {
+                        if (_f && !_f.done && (_b = _e.return))
+                            _b.call(_e);
+                    }
+                    finally {
+                        if (e_4)
+                            throw e_4.error;
+                    }
                 }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(XIcon.prototype, "d", {
+            }
+        };
+        Object.defineProperty(XIcon.prototype, "k", {
             get: function () {
-                return this.b;
+                return this.j;
             },
             set: function (a) {
-                var b = this.b;
-                this.b = a;
-                if (b != this.b) {
-                    this.b5("StrokeColors", b, this.b);
+                var b = this.j;
+                this.j = a;
+                if (b != this.j) {
+                    this.cb("BaseTheme", igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.BaseControlTheme_$type, b), igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.BaseControlTheme_$type, a));
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "c1", {
+        Object.defineProperty(XIcon.prototype, "cw", {
             get: function () {
                 return this.cj;
             },
@@ -9092,13 +9098,13 @@
                 var b = this.cj;
                 this.cj = a;
                 if (b != this.cj) {
-                    this.b5("PrimaryFillColor", b, this.cj);
+                    this.cb("ActualFill", b, a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "c2", {
+        Object.defineProperty(XIcon.prototype, "cx", {
             get: function () {
                 return this.ck;
             },
@@ -9106,13 +9112,13 @@
                 var b = this.ck;
                 this.ck = a;
                 if (b != this.ck) {
-                    this.b5("PrimaryStrokeColor", b, this.ck);
+                    this.cb("ActualStroke", b, a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "c3", {
+        Object.defineProperty(XIcon.prototype, "cy", {
             get: function () {
                 return this.cl;
             },
@@ -9120,13 +9126,27 @@
                 var b = this.cl;
                 this.cl = a;
                 if (b != this.cl) {
-                    this.b5("SecondaryFillColor", b, this.cl);
+                    this.cb("ActualTextColor", b, a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "c4", {
+        Object.defineProperty(XIcon.prototype, "af", {
+            get: function () {
+                return this.v;
+            },
+            set: function (a) {
+                var b = this.v;
+                this.v = a;
+                if (b != this.v) {
+                    this.cb("ActualStrokeWidth", b, a);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(XIcon.prototype, "fill", {
             get: function () {
                 return this.cm;
             },
@@ -9134,189 +9154,343 @@
                 var b = this.cm;
                 this.cm = a;
                 if (b != this.cm) {
-                    this.b5("SecondaryStrokeColor", b, this.cm);
+                    this.cb("Fill", b, a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "svgPath", {
+        Object.defineProperty(XIcon.prototype, "dc", {
             get: function () {
-                return this.aw;
+                return this.cu;
             },
             set: function (a) {
-                var b = this.aw;
-                this.aw = a;
-                if (b != this.aw) {
-                    this.b5("SVGPath", b, a);
+                var b = this.cu;
+                this.cu = a;
+                if (b != this.cu) {
+                    this.cb("Stroke", b, a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "svg", {
+        Object.defineProperty(XIcon.prototype, "al", {
             get: function () {
-                return this.av;
+                return this.z;
             },
             set: function (a) {
-                var b = this.av;
-                this.av = a;
-                if (b != this.av) {
-                    this.b5("SVG", b, this.av);
+                var b = this.z;
+                this.z = a;
+                if (b != this.z) {
+                    this.cb("StrokeWidth", b, a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        XIcon.prototype.b3 = function () {
-            this.r = true;
-        };
-        XIcon.prototype.b4 = function () {
-            this.r = false;
-        };
-        Object.defineProperty(XIcon.prototype, "k", {
+        Object.defineProperty(XIcon.prototype, "dd", {
             get: function () {
-                return this.j;
+                return this.cv;
             },
             set: function (a) {
-                var b = this.j;
-                this.j = a;
-                if (b != this.j) {
-                    this.b5("TextStyle", b, a);
+                var b = this.cv;
+                this.cv = a;
+                if (b != this.cv) {
+                    this.cb("TextColor", b, a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "bc", {
+        Object.defineProperty(XIcon.prototype, "c5", {
             get: function () {
-                return this.au;
+                return this.cn;
             },
             set: function (a) {
-                var b = this.au;
-                this.au = a;
-                if (b != this.au) {
-                    this.b5("Id", b, a);
+                var b = this.cn;
+                this.cn = a;
+                if (b != this.cn) {
+                    this.cb("HoverFill", b, a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "o", {
+        Object.defineProperty(XIcon.prototype, "c6", {
             get: function () {
-                return this.l;
+                return this.co;
+            },
+            set: function (a) {
+                var b = this.co;
+                this.co = a;
+                if (b != this.co) {
+                    this.cb("HoverStroke", b, a);
+                }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "aq", {
+        Object.defineProperty(XIcon.prototype, "aj", {
             get: function () {
-                return this.ap;
+                return this.x;
             },
             set: function (a) {
-                var b = this.ap;
-                this.ap = a;
-                this.l = true;
-                if (b != this.ap) {
-                    this.b5("TabIndex", b, a);
+                var b = this.x;
+                this.x = a;
+                if (b != this.x) {
+                    this.cb("HoverStrokeThickness", b, a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "a1", {
+        Object.defineProperty(XIcon.prototype, "c7", {
             get: function () {
-                return this.at;
+                return this.cp;
             },
             set: function (a) {
-                var b = this.at;
-                this.at = a;
-                if (b != this.at) {
-                    this.b5("AriaLabel", b, a);
+                var b = this.cp;
+                this.cp = a;
+                if (b != this.cp) {
+                    this.cb("HoverTextColor", b, a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "r", {
+        Object.defineProperty(XIcon.prototype, "e", {
             get: function () {
-                return this.n;
+                return this.c;
             },
             set: function (a) {
-                var b = this.n;
-                this.n = a;
-                if (b != this.n) {
-                    this.b5("IsHover", b, a);
+                var b = this.c;
+                this.c = a;
+                if (b != this.c) {
+                    this.cb("FillColors", b, this.c);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "disabled", {
+        Object.defineProperty(XIcon.prototype, "f", {
             get: function () {
-                return this.m;
+                return this.d;
             },
             set: function (a) {
-                var b = this.m;
-                this.m = a;
-                if (b != this.m) {
-                    this.b5("IsDisabled", b, a);
+                var b = this.d;
+                this.d = a;
+                if (b != this.d) {
+                    this.cb("StrokeColors", b, this.d);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "ai", {
+        Object.defineProperty(XIcon.prototype, "c8", {
             get: function () {
-                return this.w;
+                return this.cq;
             },
             set: function (a) {
-                var b = this.w;
-                this.w = a;
-                if (b != this.w) {
-                    this.b5("Opacity", b, this.w);
+                var b = this.cq;
+                this.cq = a;
+                if (b != this.cq) {
+                    this.cb("PrimaryFillColor", b, this.cq);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "al", {
+        Object.defineProperty(XIcon.prototype, "c9", {
             get: function () {
-                return this.z;
+                return this.cr;
             },
             set: function (a) {
-                var b = this.z;
-                this.z = a;
-                if (b != this.z) {
-                    this.b5("ViewBoxLeft", b, this.z);
+                var b = this.cr;
+                this.cr = a;
+                if (b != this.cr) {
+                    this.cb("PrimaryStrokeColor", b, this.cr);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "am", {
+        Object.defineProperty(XIcon.prototype, "da", {
             get: function () {
-                return this.aa;
+                return this.cs;
             },
             set: function (a) {
-                var b = this.aa;
-                this.aa = a;
-                if (b != this.aa) {
-                    this.b5("ViewBoxTop", b, this.aa);
+                var b = this.cs;
+                this.cs = a;
+                if (b != this.cs) {
+                    this.cb("SecondaryFillColor", b, this.cs);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "an", {
+        Object.defineProperty(XIcon.prototype, "db", {
             get: function () {
-                return this.ab;
+                return this.ct;
             },
             set: function (a) {
-                var b = this.ab;
-                this.ab = a;
-                if (b != this.ab) {
-                    this.b5("ViewBoxWidth", b, this.ab);
+                var b = this.ct;
+                this.ct = a;
+                if (b != this.ct) {
+                    this.cb("SecondaryStrokeColor", b, this.ct);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(XIcon.prototype, "a7", {
+            get: function () {
+                return this.aw;
+            },
+            set: function (a) {
+                var b = this.aw;
+                this.aw = a;
+                if (b != this.aw) {
+                    this.cb("DataURL", b, a);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(XIcon.prototype, "svgPath", {
+            get: function () {
+                return this.az;
+            },
+            set: function (a) {
+                var b = this.az;
+                this.az = a;
+                if (b != this.az) {
+                    this.cb("SVGPath", b, a);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(XIcon.prototype, "svg", {
+            get: function () {
+                return this.ay;
+            },
+            set: function (a) {
+                var b = this.ay;
+                this.ay = a;
+                if (b != this.ay) {
+                    this.cb("SVG", b, this.ay);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(XIcon.prototype, "b", {
+            get: function () {
+                return this.a;
+            },
+            set: function (a) {
+                var b = this.a;
+                this.a = a;
+                if (b != this.a) {
+                    this.cb("SVGPaths", b, this.a);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        XIcon.prototype.b9 = function () {
+            this.t = true;
+        };
+        XIcon.prototype.ca = function () {
+            this.t = false;
+        };
+        Object.defineProperty(XIcon.prototype, "m", {
+            get: function () {
+                return this.l;
+            },
+            set: function (a) {
+                var b = this.l;
+                this.l = a;
+                if (b != this.l) {
+                    this.cb("TextStyle", b, a);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(XIcon.prototype, "bh", {
+            get: function () {
+                return this.ax;
+            },
+            set: function (a) {
+                var b = this.ax;
+                this.ax = a;
+                if (b != this.ax) {
+                    this.cb("Id", b, a);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(XIcon.prototype, "q", {
+            get: function () {
+                return this.n;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(XIcon.prototype, "as", {
+            get: function () {
+                return this.ar;
+            },
+            set: function (a) {
+                var b = this.ar;
+                this.ar = a;
+                this.n = true;
+                if (b != this.ar) {
+                    this.cb("TabIndex", b, a);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(XIcon.prototype, "a4", {
+            get: function () {
+                return this.av;
+            },
+            set: function (a) {
+                var b = this.av;
+                this.av = a;
+                if (b != this.av) {
+                    this.cb("AriaLabel", b, a);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(XIcon.prototype, "t", {
+            get: function () {
+                return this.p;
+            },
+            set: function (a) {
+                var b = this.p;
+                this.p = a;
+                if (b != this.p) {
+                    this.cb("IsHover", b, a);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(XIcon.prototype, "disabled", {
+            get: function () {
+                return this.o;
+            },
+            set: function (a) {
+                var b = this.o;
+                this.o = a;
+                if (b != this.o) {
+                    this.cb("IsDisabled", b, a);
                 }
             },
             enumerable: false,
@@ -9330,7 +9504,21 @@
                 var b = this.y;
                 this.y = a;
                 if (b != this.y) {
-                    this.b5("ViewBoxHeight", b, this.y);
+                    this.cb("Opacity", b, this.y);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(XIcon.prototype, "an", {
+            get: function () {
+                return this.ab;
+            },
+            set: function (a) {
+                var b = this.ab;
+                this.ab = a;
+                if (b != this.ab) {
+                    this.cb("ViewBoxLeft", b, this.ab);
                 }
             },
             enumerable: false,
@@ -9344,35 +9532,77 @@
                 var b = this.ac;
                 this.ac = a;
                 if (b != this.ac) {
-                    this.b5("Width", b, this.ac);
+                    this.cb("ViewBoxTop", b, this.ac);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "ag", {
+        Object.defineProperty(XIcon.prototype, "ap", {
             get: function () {
-                return this.u;
+                return this.ad;
             },
             set: function (a) {
-                var b = this.u;
-                this.u = a;
-                if (b != this.u) {
-                    this.b5("Height", b, this.u);
+                var b = this.ad;
+                this.ad = a;
+                if (b != this.ad) {
+                    this.cb("ViewBoxWidth", b, this.ad);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(XIcon.prototype, "am", {
+            get: function () {
+                return this.aa;
+            },
+            set: function (a) {
+                var b = this.aa;
+                this.aa = a;
+                if (b != this.aa) {
+                    this.cb("ViewBoxHeight", b, this.aa);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        XIcon.prototype.b6 = function () {
+        Object.defineProperty(XIcon.prototype, "aq", {
+            get: function () {
+                return this.ae;
+            },
+            set: function (a) {
+                var b = this.ae;
+                this.ae = a;
+                if (b != this.ae) {
+                    this.cb("Width", b, this.ae);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(XIcon.prototype, "ai", {
+            get: function () {
+                return this.w;
+            },
+            set: function (a) {
+                var b = this.w;
+                this.w = a;
+                if (b != this.w) {
+                    this.cb("Height", b, this.w);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        XIcon.prototype.cc = function () {
         };
         XIcon.prototype.onDetachedFromUI = function () {
-            this.view.ab();
+            this.view.ai();
         };
         XIcon.prototype.onAttachedToUI = function () {
-            this.view.y();
+            this.view.af();
         };
-        XIcon.prototype.b1 = function () {
+        XIcon.prototype.b7 = function () {
             if (this.disabled) {
                 return;
             }
@@ -9380,72 +9610,73 @@
                 this.clicked(this, new IconClickedEventArgs());
             }
         };
-        XIcon.prototype.s = function () {
-            return this.view.g();
+        XIcon.prototype.u = function () {
+            return this.view.j();
         };
-        XIcon.prototype.as = function () {
-            return this.e();
+        XIcon.prototype.au = function () {
+            return this.g();
         };
-        XIcon.prototype.a4 = function () {
-            var a = this.e();
-            return a.j();
+        XIcon.prototype.a9 = function () {
+            var a = this.g();
+            return a.k();
         };
-        XIcon.prototype.e = function () {
+        XIcon.prototype.g = function () {
             var a = new IconVisualModelExport();
-            var b = this.view.r;
+            var b = this.view.x;
             a.a = igniteuiWebcomponentsCore.AppearanceHelper.a(igniteuiWebcomponentsCore.NativeUI.al(b));
             a.c = igniteuiWebcomponentsCore.AppearanceHelper.a(igniteuiWebcomponentsCore.NativeUI.al(b));
             a.b = igniteuiWebcomponentsCore.AppearanceHelper.a(igniteuiWebcomponentsCore.NativeUI.am(b));
-            a.d = this.ad;
-            var c = this.view.a();
+            a.d = this.af;
+            var c = this.view.b();
             a.h = c[0];
             a.f = c[1];
             a.e = igniteuiWebcomponentsCore.NativeUI.d(b);
             a.i = igniteuiWebcomponentsCore.NativeUI.k(b);
             a.svgPath = this.svgPath;
-            if (this.k != null) {
-                var d = this.k;
-                if (this.view != null && d.p == null) {
-                    var e = this.view.o;
+            a.j = this.a7;
+            if (this.m != null) {
+                var d = this.m;
+                if (this.view != null && d.q == null) {
+                    var e = this.view.t;
                     var f = igniteuiWebcomponentsCore.FontUtil.getFontInfoFromString(e, d.fontString);
-                    d.p = f.p;
-                    d.e = f.e;
                     d.q = f.q;
-                    d.s = f.s;
+                    d.f = f.f;
+                    d.r = f.r;
                     d.t = f.t;
                     d.u = f.u;
+                    d.v = f.v;
                 }
-                if (d.p != null) {
-                    a.l = d.p;
+                if (d.q != null) {
+                    a.m = d.q;
                 }
-                if (!igniteuiWebcomponentsCore.isNaN_(d.e)) {
-                    a.g = d.e;
+                if (!igniteuiWebcomponentsCore.isNaN_(d.f)) {
+                    a.g = d.f;
                 }
-                if (d.u != null) {
-                    a.p = d.u;
+                if (d.v != null) {
+                    a.q = d.v;
                 }
-                if (d.s != null) {
-                    a.n = d.s;
+                if (d.t != null) {
+                    a.o = d.t;
                 }
-                if (d.q != null) {
-                    a.m = d.s;
+                if (d.r != null) {
+                    a.n = d.t;
                 }
             }
             return a;
         };
         XIcon.prototype.provideContainer = function (a) {
-            this.view.aa(a);
+            this.view.ah(a);
         };
         XIcon.$t = igniteuiWebcomponentsCore.markType(XIcon, 'XIcon', igniteuiWebcomponentsCore.Base.$, [igniteuiWebcomponentsCore.INotifyPropertyChanged_$type, igniteuiWebcomponentsCore.IIcon_$type]);
-        XIcon.cs = null;
-        XIcon.cx = null;
-        XIcon.cw = null;
-        XIcon.ct = null;
-        XIcon.cu = null;
-        XIcon.cv = null;
-        XIcon.af = NaN;
-        XIcon.ae = NaN;
-        XIcon.ar = 0;
+        XIcon.cz = null;
+        XIcon.c4 = null;
+        XIcon.c3 = null;
+        XIcon.c0 = null;
+        XIcon.c1 = null;
+        XIcon.c2 = null;
+        XIcon.ah = NaN;
+        XIcon.ag = NaN;
+        XIcon.at = 0;
         return XIcon;
     }(igniteuiWebcomponentsCore.Base));
 
@@ -9663,11 +9894,11 @@
          * Gets or sets the base built in theme to use for the button.
         */
             get: function () {
-                return this.i.i;
+                return this.i.k;
             },
             set: function (v) {
-                this.i.i = igniteuiWebcomponentsCore.ensureEnum(igniteuiWebcomponentsCore.BaseControlTheme_$type, v);
-                this._a("baseTheme", igniteuiWebcomponentsCore.enumToString(igniteuiWebcomponentsCore.BaseControlTheme_$type, this.i.i));
+                this.i.k = igniteuiWebcomponentsCore.ensureEnum(igniteuiWebcomponentsCore.BaseControlTheme_$type, v);
+                this._a("baseTheme", igniteuiWebcomponentsCore.enumToString(igniteuiWebcomponentsCore.BaseControlTheme_$type, this.i.k));
             },
             enumerable: false,
             configurable: true
@@ -9677,11 +9908,11 @@
              * Gets the fill color currently used by the icon.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.cp);
+                return igniteuiWebcomponentsCore.brushToString(this.i.cw);
             },
             set: function (v) {
-                this.i.cp = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("actualFill", igniteuiWebcomponentsCore.brushToString(this.i.cp));
+                this.i.cw = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("actualFill", igniteuiWebcomponentsCore.brushToString(this.i.cw));
             },
             enumerable: false,
             configurable: true
@@ -9691,11 +9922,11 @@
              * Gets the stroke color currently used by the icon.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.cq);
+                return igniteuiWebcomponentsCore.brushToString(this.i.cx);
             },
             set: function (v) {
-                this.i.cq = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("actualStroke", igniteuiWebcomponentsCore.brushToString(this.i.cq));
+                this.i.cx = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("actualStroke", igniteuiWebcomponentsCore.brushToString(this.i.cx));
             },
             enumerable: false,
             configurable: true
@@ -9705,11 +9936,11 @@
              * Gets the text color currently used by the icon.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.cr);
+                return igniteuiWebcomponentsCore.brushToString(this.i.cy);
             },
             set: function (v) {
-                this.i.cr = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("actualTextColor", igniteuiWebcomponentsCore.brushToString(this.i.cr));
+                this.i.cy = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("actualTextColor", igniteuiWebcomponentsCore.brushToString(this.i.cy));
             },
             enumerable: false,
             configurable: true
@@ -9719,11 +9950,11 @@
              * Gets the stroke width currently used by the icon.
             */
             get: function () {
-                return this.i.ad;
+                return this.i.af;
             },
             set: function (v) {
-                this.i.ad = +v;
-                this._a("actualStrokeWidth", this.i.ad);
+                this.i.af = +v;
+                this._a("actualStrokeWidth", this.i.af);
             },
             enumerable: false,
             configurable: true
@@ -9747,11 +9978,11 @@
              * Gets or sets the stroke color to use for the icon.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.c5);
+                return igniteuiWebcomponentsCore.brushToString(this.i.dc);
             },
             set: function (v) {
-                this.i.c5 = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("stroke", igniteuiWebcomponentsCore.brushToString(this.i.c5));
+                this.i.dc = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("stroke", igniteuiWebcomponentsCore.brushToString(this.i.dc));
             },
             enumerable: false,
             configurable: true
@@ -9761,11 +9992,11 @@
              * Gets or sets the stroke thickness to use for the icon.
             */
             get: function () {
-                return this.i.aj;
+                return this.i.al;
             },
             set: function (v) {
-                this.i.aj = +v;
-                this._a("strokeWidth", this.i.aj);
+                this.i.al = +v;
+                this._a("strokeWidth", this.i.al);
             },
             enumerable: false,
             configurable: true
@@ -9775,11 +10006,11 @@
              * Gets or sets the text color to use for the icon.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.c6);
+                return igniteuiWebcomponentsCore.brushToString(this.i.dd);
             },
             set: function (v) {
-                this.i.c6 = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("textColor", igniteuiWebcomponentsCore.brushToString(this.i.c6));
+                this.i.dd = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("textColor", igniteuiWebcomponentsCore.brushToString(this.i.dd));
             },
             enumerable: false,
             configurable: true
@@ -9789,11 +10020,11 @@
              * Gets or sets the fill color to use when the icon is hovered.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.cy);
+                return igniteuiWebcomponentsCore.brushToString(this.i.c5);
             },
             set: function (v) {
-                this.i.cy = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("hoverFill", igniteuiWebcomponentsCore.brushToString(this.i.cy));
+                this.i.c5 = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("hoverFill", igniteuiWebcomponentsCore.brushToString(this.i.c5));
             },
             enumerable: false,
             configurable: true
@@ -9803,11 +10034,11 @@
              * Gets or sets the stroke color to use when the icon is hovered.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.cz);
+                return igniteuiWebcomponentsCore.brushToString(this.i.c6);
             },
             set: function (v) {
-                this.i.cz = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("hoverStroke", igniteuiWebcomponentsCore.brushToString(this.i.cz));
+                this.i.c6 = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("hoverStroke", igniteuiWebcomponentsCore.brushToString(this.i.c6));
             },
             enumerable: false,
             configurable: true
@@ -9817,11 +10048,11 @@
              * Gets or sets the stroke thickness to use when the icon is hovered.
             */
             get: function () {
-                return this.i.ah;
+                return this.i.aj;
             },
             set: function (v) {
-                this.i.ah = +v;
-                this._a("hoverStrokeThickness", this.i.ah);
+                this.i.aj = +v;
+                this._a("hoverStrokeThickness", this.i.aj);
             },
             enumerable: false,
             configurable: true
@@ -9831,11 +10062,11 @@
              * Gets or sets the text color to use when the icon is hovered.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.c0);
+                return igniteuiWebcomponentsCore.brushToString(this.i.c7);
             },
             set: function (v) {
-                this.i.c0 = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("hoverTextColor", igniteuiWebcomponentsCore.brushToString(this.i.c0));
+                this.i.c7 = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("hoverTextColor", igniteuiWebcomponentsCore.brushToString(this.i.c7));
             },
             enumerable: false,
             configurable: true
@@ -9848,11 +10079,11 @@
              * class where # is a number from 0 to count - 1.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.fromBrushCollection(this.i.c);
+                return igniteuiWebcomponentsCore.fromBrushCollection(this.i.e);
             },
             set: function (v) {
-                this.i.c = igniteuiWebcomponentsCore.toBrushCollection(v);
-                this._a("fillColors", igniteuiWebcomponentsCore.brushCollectionToString(this.i.c));
+                this.i.e = igniteuiWebcomponentsCore.toBrushCollection(v);
+                this._a("fillColors", igniteuiWebcomponentsCore.brushCollectionToString(this.i.e));
             },
             enumerable: false,
             configurable: true
@@ -9865,11 +10096,11 @@
              * class where # is a number from 0 to count - 1.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.fromBrushCollection(this.i.d);
+                return igniteuiWebcomponentsCore.fromBrushCollection(this.i.f);
             },
             set: function (v) {
-                this.i.d = igniteuiWebcomponentsCore.toBrushCollection(v);
-                this._a("strokeColors", igniteuiWebcomponentsCore.brushCollectionToString(this.i.d));
+                this.i.f = igniteuiWebcomponentsCore.toBrushCollection(v);
+                this._a("strokeColors", igniteuiWebcomponentsCore.brushCollectionToString(this.i.f));
             },
             enumerable: false,
             configurable: true
@@ -9883,11 +10114,11 @@
              * class.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.c1);
+                return igniteuiWebcomponentsCore.brushToString(this.i.c8);
             },
             set: function (v) {
-                this.i.c1 = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("primaryFillColor", igniteuiWebcomponentsCore.brushToString(this.i.c1));
+                this.i.c8 = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("primaryFillColor", igniteuiWebcomponentsCore.brushToString(this.i.c8));
             },
             enumerable: false,
             configurable: true
@@ -9901,11 +10132,11 @@
              * class.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.c2);
+                return igniteuiWebcomponentsCore.brushToString(this.i.c9);
             },
             set: function (v) {
-                this.i.c2 = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("primaryStrokeColor", igniteuiWebcomponentsCore.brushToString(this.i.c2));
+                this.i.c9 = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("primaryStrokeColor", igniteuiWebcomponentsCore.brushToString(this.i.c9));
             },
             enumerable: false,
             configurable: true
@@ -9919,11 +10150,11 @@
              * class.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.c3);
+                return igniteuiWebcomponentsCore.brushToString(this.i.da);
             },
             set: function (v) {
-                this.i.c3 = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("secondaryFillColor", igniteuiWebcomponentsCore.brushToString(this.i.c3));
+                this.i.da = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("secondaryFillColor", igniteuiWebcomponentsCore.brushToString(this.i.da));
             },
             enumerable: false,
             configurable: true
@@ -9937,11 +10168,24 @@
              * class.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.c4);
+                return igniteuiWebcomponentsCore.brushToString(this.i.db);
             },
             set: function (v) {
-                this.i.c4 = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("secondaryStrokeColor", igniteuiWebcomponentsCore.brushToString(this.i.c4));
+                this.i.db = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("secondaryStrokeColor", igniteuiWebcomponentsCore.brushToString(this.i.db));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IgcXIconComponent.prototype, "dataURL", {
+            /**
+             * Gets or sets data url for the icon to use.
+            */
+            get: function () {
+                return this.i.a7;
+            },
+            set: function (v) {
+                this.i.a7 = v;
             },
             enumerable: false,
             configurable: true
@@ -9972,21 +10216,38 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(IgcXIconComponent.prototype, "sVGPaths", {
+            /**
+             * Gets or sets an array of path data for the icon to use.
+            */
+            get: function () {
+                return this.i.b;
+            },
+            set: function (v) {
+                if (v && !Array.isArray(v) && typeof (v) == "string") {
+                    var re = /\s*(?:,|\s|$)\s*/gm;
+                    v = v.split(re);
+                }
+                this.i.b = v;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(IgcXIconComponent.prototype, "textStyle", {
             /**
              * Gets or sets the use for the button.
             */
             get: function () {
-                if (this.i.k == null) {
+                if (this.i.m == null) {
                     return null;
                 }
-                return this.i.k.fontString;
+                return this.i.m.fontString;
             },
             set: function (v) {
                 var fi = new igniteuiWebcomponentsCore.FontInfo();
                 fi.fontString = v;
-                this.i.k = fi;
-                this._a("textStyle", this.i.k != null ? this.i.k.fontString : "");
+                this.i.m = fi;
+                this._a("textStyle", this.i.m != null ? this.i.m.fontString : "");
             },
             enumerable: false,
             configurable: true
@@ -9996,10 +10257,10 @@
              * Gets or sets the id to use for the checkbox.
             */
             get: function () {
-                return this.i.bc;
+                return this.i.bh;
             },
             set: function (v) {
-                this.i.bc = v;
+                this.i.bh = v;
             },
             enumerable: false,
             configurable: true
@@ -10009,11 +10270,11 @@
              * Gets or sets TabIndex to use for the checkbox.
             */
             get: function () {
-                return this.i.aq;
+                return this.i.as;
             },
             set: function (v) {
-                this.i.aq = +v;
-                this._a("tabIndex", this.i.aq);
+                this.i.as = +v;
+                this._a("tabIndex", this.i.as);
             },
             enumerable: false,
             configurable: true
@@ -10023,10 +10284,10 @@
              * Gets or sets the value of the aria-label attribute.
             */
             get: function () {
-                return this.i.a1;
+                return this.i.a4;
             },
             set: function (v) {
-                this.i.a1 = v;
+                this.i.a4 = v;
             },
             enumerable: false,
             configurable: true
@@ -10036,11 +10297,11 @@
              * Gets or sets whether the icon is hovered.
             */
             get: function () {
-                return this.i.r;
+                return this.i.t;
             },
             set: function (v) {
-                this.i.r = igniteuiWebcomponentsCore.ensureBool(v);
-                this._a("isHover", this.i.r);
+                this.i.t = igniteuiWebcomponentsCore.ensureBool(v);
+                this._a("isHover", this.i.t);
             },
             enumerable: false,
             configurable: true
@@ -10061,11 +10322,11 @@
         });
         Object.defineProperty(IgcXIconComponent.prototype, "opacity", {
             get: function () {
-                return this.i.ai;
+                return this.i.ak;
             },
             set: function (v) {
-                this.i.ai = +v;
-                this._a("opacity", this.i.ai);
+                this.i.ak = +v;
+                this._a("opacity", this.i.ak);
             },
             enumerable: false,
             configurable: true
@@ -10075,11 +10336,11 @@
              * Gets or sets the viewbox left for the svg icon.
             */
             get: function () {
-                return this.i.al;
+                return this.i.an;
             },
             set: function (v) {
-                this.i.al = +v;
-                this._a("viewBoxLeft", this.i.al);
+                this.i.an = +v;
+                this._a("viewBoxLeft", this.i.an);
             },
             enumerable: false,
             configurable: true
@@ -10089,11 +10350,11 @@
              * Gets or sets the viewbox top for the svg icon.
             */
             get: function () {
-                return this.i.am;
+                return this.i.ao;
             },
             set: function (v) {
-                this.i.am = +v;
-                this._a("viewBoxTop", this.i.am);
+                this.i.ao = +v;
+                this._a("viewBoxTop", this.i.ao);
             },
             enumerable: false,
             configurable: true
@@ -10103,11 +10364,11 @@
              * Gets or sets the viewbox width for the svg icon.
             */
             get: function () {
-                return this.i.an;
+                return this.i.ap;
             },
             set: function (v) {
-                this.i.an = +v;
-                this._a("viewBoxWidth", this.i.an);
+                this.i.ap = +v;
+                this._a("viewBoxWidth", this.i.ap);
             },
             enumerable: false,
             configurable: true
@@ -10117,11 +10378,11 @@
              * Gets or sets the viewbox height for the svg icon.
             */
             get: function () {
-                return this.i.ak;
+                return this.i.am;
             },
             set: function (v) {
-                this.i.ak = +v;
-                this._a("viewBoxHeight", this.i.ak);
+                this.i.am = +v;
+                this._a("viewBoxHeight", this.i.am);
             },
             enumerable: false,
             configurable: true
@@ -10131,11 +10392,11 @@
              * Gets or sets the width of the icon.
             */
             get: function () {
-                return this.i.ao;
+                return this.i.aq;
             },
             set: function (v) {
-                this.i.ao = +v;
-                this._a("width", this.i.ao);
+                this.i.aq = +v;
+                this._a("width", this.i.aq);
             },
             enumerable: false,
             configurable: true
@@ -10145,11 +10406,11 @@
              * Gets or sets the height of the icon.
             */
             get: function () {
-                return this.i.ag;
+                return this.i.ai;
             },
             set: function (v) {
-                this.i.ag = +v;
-                this._a("height", this.i.ag);
+                this.i.ai = +v;
+                this._a("height", this.i.ai);
             },
             enumerable: false,
             configurable: true
@@ -10230,7 +10491,7 @@
         
         */
         IgcXIconComponent.prototype.exportVisualModel = function () {
-            var iv = this.i.as();
+            var iv = this.i.au();
             return (iv);
         };
         /**
@@ -10238,7 +10499,7 @@
         
         */
         IgcXIconComponent.prototype.exportSerializedVisualModel = function () {
-            var iv = this.i.a4();
+            var iv = this.i.a9();
             return (iv);
         };
         IgcXIconComponent._observedAttributesIgcXIconComponent = null;
@@ -13395,30 +13656,30 @@
             }
             if (this.v != null) {
                 var w = this.v;
-                if (this.h != null && w.p == null) {
+                if (this.h != null && w.q == null) {
                     var x = this.h.m;
                     var y = igniteuiWebcomponentsCore.FontUtil.getFontInfoFromString(x, w.fontString);
-                    w.p = y.p;
-                    w.e = y.e;
                     w.q = y.q;
-                    w.s = y.s;
+                    w.f = y.f;
+                    w.r = y.r;
                     w.t = y.t;
                     w.u = y.u;
+                    w.v = y.v;
                 }
-                if (w.p != null) {
-                    a.p = w.p;
+                if (w.q != null) {
+                    a.p = w.q;
                 }
-                if (!igniteuiWebcomponentsCore.isNaN_(w.e)) {
-                    a.m = w.e;
+                if (!igniteuiWebcomponentsCore.isNaN_(w.f)) {
+                    a.m = w.f;
                 }
-                if (w.u != null) {
-                    a.t = w.u;
+                if (w.v != null) {
+                    a.t = w.v;
                 }
-                if (w.s != null) {
-                    a.r = w.s;
+                if (w.t != null) {
+                    a.r = w.t;
                 }
-                if (w.q != null) {
-                    a.q = w.s;
+                if (w.r != null) {
+                    a.q = w.t;
                 }
             }
             return a;
@@ -20588,30 +20849,30 @@
             a.p = this.e;
             if (this.w != null) {
                 var c = this.w;
-                if (this.view != null && c.p == null) {
+                if (this.view != null && c.q == null) {
                     var d = this.view.k;
                     var e = igniteuiWebcomponentsCore.FontUtil.getFontInfoFromString(d, c.fontString);
-                    c.p = e.p;
-                    c.e = e.e;
                     c.q = e.q;
-                    c.s = e.s;
+                    c.f = e.f;
+                    c.r = e.r;
                     c.t = e.t;
                     c.u = e.u;
+                    c.v = e.v;
                 }
-                if (c.p != null) {
-                    a.s = c.p;
+                if (c.q != null) {
+                    a.s = c.q;
                 }
-                if (!igniteuiWebcomponentsCore.isNaN_(c.e)) {
-                    a.k = c.e;
+                if (!igniteuiWebcomponentsCore.isNaN_(c.f)) {
+                    a.k = c.f;
                 }
-                if (c.u != null) {
-                    a.w = c.u;
+                if (c.v != null) {
+                    a.w = c.v;
                 }
-                if (c.s != null) {
-                    a.u = c.s;
+                if (c.t != null) {
+                    a.u = c.t;
                 }
-                if (c.q != null) {
-                    a.t = c.s;
+                if (c.r != null) {
+                    a.t = c.t;
                 }
             }
             return a;
@@ -20703,7 +20964,7 @@
             _this.view = a;
             _this.view.as();
             XInput.ae = new igniteuiWebcomponentsCore.FontInfo();
-            XInput.ae.p = "Verdana";
+            XInput.ae.q = "Verdana";
             return _this;
         }
         Object.defineProperty(XInput.prototype, "view", {
@@ -21376,30 +21637,30 @@
             a.k = this.e;
             if (this.ad != null) {
                 var c = this.ad;
-                if (this.view != null && c.p == null) {
+                if (this.view != null && c.q == null) {
                     var d = this.view.l;
                     var e = igniteuiWebcomponentsCore.FontUtil.getFontInfoFromString(d, c.fontString);
-                    c.p = e.p;
-                    c.e = e.e;
                     c.q = e.q;
-                    c.s = e.s;
+                    c.f = e.f;
+                    c.r = e.r;
                     c.t = e.t;
                     c.u = e.u;
+                    c.v = e.v;
                 }
-                if (c.p != null) {
-                    a.o = c.p;
+                if (c.q != null) {
+                    a.o = c.q;
                 }
-                if (!igniteuiWebcomponentsCore.isNaN_(c.e)) {
-                    a.g = c.e;
+                if (!igniteuiWebcomponentsCore.isNaN_(c.f)) {
+                    a.g = c.f;
                 }
-                if (c.u != null) {
-                    a.s = c.u;
+                if (c.v != null) {
+                    a.s = c.v;
                 }
-                if (c.s != null) {
-                    a.q = c.s;
+                if (c.t != null) {
+                    a.q = c.t;
                 }
-                if (c.q != null) {
-                    a.p = c.s;
+                if (c.r != null) {
+                    a.p = c.t;
                 }
             }
             return a;
@@ -27882,30 +28143,30 @@
             a.a = this.c.bj();
             if (this.ad != null) {
                 var b = this.ad;
-                if (this.h != null && b.p == null) {
+                if (this.h != null && b.q == null) {
                     var c = this.h.d;
                     var d = igniteuiWebcomponentsCore.FontUtil.getFontInfoFromString(c, b.fontString);
-                    b.p = d.p;
-                    b.e = d.e;
                     b.q = d.q;
-                    b.s = d.s;
+                    b.f = d.f;
+                    b.r = d.r;
                     b.t = d.t;
                     b.u = d.u;
+                    b.v = d.v;
                 }
-                if (b.p != null) {
-                    a.h = b.p;
+                if (b.q != null) {
+                    a.h = b.q;
                 }
-                if (!igniteuiWebcomponentsCore.isNaN_(b.e)) {
-                    a.f = b.e;
+                if (!igniteuiWebcomponentsCore.isNaN_(b.f)) {
+                    a.f = b.f;
                 }
-                if (b.u != null) {
-                    a.l = b.u;
+                if (b.v != null) {
+                    a.l = b.v;
                 }
-                if (b.s != null) {
-                    a.j = b.s;
+                if (b.t != null) {
+                    a.j = b.t;
                 }
-                if (b.q != null) {
-                    a.i = b.s;
+                if (b.r != null) {
+                    a.i = b.t;
                 }
             }
             return a;
@@ -28999,12 +29260,12 @@
             _this.p = null;
             return _this;
         }
-        CheckboxView.prototype.ae = function () {
+        CheckboxView.prototype.af = function () {
         };
         CheckboxView.prototype.i = function () {
             return true;
         };
-        CheckboxView.prototype.ac = function (a) {
+        CheckboxView.prototype.ad = function (a) {
             var e_1, _a;
             if (a == null) {
                 try {
@@ -29051,11 +29312,11 @@
             this.r.setStyleProperty("appearance", "none");
             this.r.setAttribute("type", "checkbox");
             this.r.setAttribute("id", this.c.b1);
-            this.ai();
-            this.j.add(c.listen("change", igniteuiWebcomponentsCore.runOn(this, this.w)));
-            this.j.add(c.listen("click", igniteuiWebcomponentsCore.runOn(this, this.x)));
-            this.j.add(c.listen("focus", igniteuiWebcomponentsCore.runOn(this, this.y)));
-            this.j.add(c.listen("blur", igniteuiWebcomponentsCore.runOn(this, this.v)));
+            this.aj();
+            this.j.add(c.listen("change", igniteuiWebcomponentsCore.runOn(this, this.x)));
+            this.j.add(c.listen("click", igniteuiWebcomponentsCore.runOn(this, this.y)));
+            this.j.add(c.listen("focus", igniteuiWebcomponentsCore.runOn(this, this.z)));
+            this.j.add(c.listen("blur", igniteuiWebcomponentsCore.runOn(this, this.w)));
             this.l.append(c);
             var d = this.l.createElement("div");
             d.addClass("ig-checkbox-box");
@@ -29139,16 +29400,16 @@
             l.setStyleProperty("cursor", "pointer");
             l.setStyleProperty("role", "label");
             this.p = l;
-            this.j.add(l.listen("click", igniteuiWebcomponentsCore.runOn(this, this.u)));
+            this.j.add(l.listen("click", igniteuiWebcomponentsCore.runOn(this, this.v)));
             this.l.append(l);
             this.l.getPortal(l, "ChildContent", function (m) {
             }, true);
             this.c.cp();
         };
-        CheckboxView.prototype.u = function (a) {
+        CheckboxView.prototype.v = function (a) {
             this.c.toggle();
         };
-        CheckboxView.prototype.ai = function () {
+        CheckboxView.prototype.aj = function () {
             if (this.i()) {
                 var a = this.c.b1;
                 this.r.setAttribute("name", this.c.ca);
@@ -29170,26 +29431,26 @@
                 this.r.setAttribute("aria-label", this.c.bm);
             }
         };
-        CheckboxView.prototype.ak = function () {
+        CheckboxView.prototype.al = function () {
             return new igniteuiWebcomponentsCore.Size(1, this.q.width(), this.q.height());
         };
-        CheckboxView.prototype.ah = function () {
+        CheckboxView.prototype.ai = function () {
             this.n.setAttribute("d", this.c.bf);
         };
-        CheckboxView.prototype.af = function () {
+        CheckboxView.prototype.ag = function () {
             if (this.i()) {
                 var a = this.c.b1;
                 this.r.setAttribute("id", a);
                 this.q.setAttribute("for", a);
             }
         };
-        CheckboxView.prototype.v = function (a) {
+        CheckboxView.prototype.w = function (a) {
             this.c.focused = false;
         };
-        CheckboxView.prototype.y = function (a) {
+        CheckboxView.prototype.z = function (a) {
             this.c.focused = true;
         };
-        CheckboxView.prototype.x = function (a) {
+        CheckboxView.prototype.y = function (a) {
             a.stopPropagation();
             if (this.h()) {
                 var native_ = this.r.getNativeElement();
@@ -29200,10 +29461,10 @@
         CheckboxView.prototype.h = function () {
             return false;
         };
-        CheckboxView.prototype.w = function (a) {
+        CheckboxView.prototype.x = function (a) {
             a.stopPropagation();
         };
-        CheckboxView.prototype.z = function () {
+        CheckboxView.prototype.aa = function () {
             if (igniteuiWebcomponentsCore.KeyFrameAnimationFactory.h == null) {
                 igniteuiWebcomponentsCore.KeyFrameAnimationFactory.h = this.l;
             }
@@ -29214,8 +29475,15 @@
         CheckboxView.prototype.b = function (a) {
             return new igniteuiWebcomponentsCore.AnimationKeyFrameEffect(0, this.o, 0, null, a);
         };
-        CheckboxView.prototype.aa = function (a) {
+        CheckboxView.prototype.ab = function (a) {
         };
+        Object.defineProperty(CheckboxView.prototype, "t", {
+            get: function () {
+                return this.q;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(CheckboxView.prototype, "s", {
             get: function () {
                 return this.q;
@@ -29230,22 +29498,22 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(CheckboxView.prototype, "t", {
+        Object.defineProperty(CheckboxView.prototype, "u", {
             get: function () {
                 return this.o;
             },
             enumerable: false,
             configurable: true
         });
-        CheckboxView.prototype.ab = function () {
+        CheckboxView.prototype.ac = function () {
             this.g = true;
-            this.j.add(this.r.listen("change", igniteuiWebcomponentsCore.runOn(this, this.w)));
-            this.j.add(this.r.listen("click", igniteuiWebcomponentsCore.runOn(this, this.x)));
-            this.j.add(this.r.listen("focus", igniteuiWebcomponentsCore.runOn(this, this.y)));
-            this.j.add(this.r.listen("blur", igniteuiWebcomponentsCore.runOn(this, this.v)));
-            this.j.add(this.p.listen("click", igniteuiWebcomponentsCore.runOn(this, this.u)));
+            this.j.add(this.r.listen("change", igniteuiWebcomponentsCore.runOn(this, this.x)));
+            this.j.add(this.r.listen("click", igniteuiWebcomponentsCore.runOn(this, this.y)));
+            this.j.add(this.r.listen("focus", igniteuiWebcomponentsCore.runOn(this, this.z)));
+            this.j.add(this.r.listen("blur", igniteuiWebcomponentsCore.runOn(this, this.w)));
+            this.j.add(this.p.listen("click", igniteuiWebcomponentsCore.runOn(this, this.v)));
         };
-        CheckboxView.prototype.ad = function () {
+        CheckboxView.prototype.ae = function () {
             var e_2, _a;
             this.g = false;
             try {
@@ -29269,14 +29537,14 @@
             }
             this.j.clear();
         };
-        CheckboxView.prototype.ag = function () {
+        CheckboxView.prototype.ah = function () {
             var model_ = this.c;
             if (model_.externalObject && model_.externalObject.refreshDefaults) {
                 model_.externalObject.refreshDefaults();
             }
             ;
         };
-        CheckboxView.prototype.aj = function (a, b) {
+        CheckboxView.prototype.ak = function (a, b) {
             this.d.ax = a;
             this.d.aw = b;
         };
@@ -29351,7 +29619,7 @@
             var a = new CheckboxView();
             a.c = _this;
             _this.view = a;
-            _this.view.ae();
+            _this.view.af();
             return _this;
         }
         Object.defineProperty(XCheckbox.prototype, "view", {
@@ -29455,7 +29723,7 @@
                     this.ct();
                     break;
                 case "ActualCheckPath":
-                    this.view.ah();
+                    this.view.ai();
                     break;
                 case "IsChecked":
                     if (!this.s) {
@@ -29478,30 +29746,32 @@
                     this.view.e.i = this.y;
                     break;
                 case "InputId":
-                    this.view.af();
+                    this.view.ag();
                     break;
             }
         };
         XCheckbox.prototype.ct = function () {
-            var a = this.view.s;
-            if (a == null) {
+            var a = this.view.t;
+            var b = this.view.s;
+            if (a == null || b == null) {
                 return;
             }
             igniteuiWebcomponentsCore.NativeUI.o(a, new igniteuiWebcomponentsCore.CornerRadius(0, this.ao));
+            igniteuiWebcomponentsCore.NativeUI.o(b, new igniteuiWebcomponentsCore.CornerRadius(0, this.ao));
             if (!igniteuiWebcomponentsCore.isNaN_(this.an)) {
-                igniteuiWebcomponentsCore.NativeUI.p(a, new igniteuiWebcomponentsCore.Thickness(0, this.an));
+                igniteuiWebcomponentsCore.NativeUI.p(b, new igniteuiWebcomponentsCore.Thickness(0, this.an));
             }
             if (this.checked) {
                 igniteuiWebcomponentsCore.NativeUI.m(a, this.c8);
-                igniteuiWebcomponentsCore.NativeUI.n(a, this.c9);
+                igniteuiWebcomponentsCore.NativeUI.n(b, this.c9);
             }
             else {
                 igniteuiWebcomponentsCore.NativeUI.m(a, this.db);
-                igniteuiWebcomponentsCore.NativeUI.n(a, this.dc);
+                igniteuiWebcomponentsCore.NativeUI.n(b, this.dc);
             }
         };
         XCheckbox.prototype.cw = function () {
-            var a = this.view.t;
+            var a = this.view.u;
             if (a == null) {
                 return;
             }
@@ -29992,10 +30262,10 @@
         XCheckbox.prototype.cp = function () {
             this.ck();
             if (this.checked) {
-                this.view.aj(igniteuiWebcomponentsCore.BrushUtil.q(this.c8, 0.6), igniteuiWebcomponentsCore.BrushUtil.q(this.c8, 0.1));
+                this.view.ak(igniteuiWebcomponentsCore.BrushUtil.q(this.c8, 0.6), igniteuiWebcomponentsCore.BrushUtil.q(this.c8, 0.1));
             }
             else {
-                this.view.aj(igniteuiWebcomponentsCore.BrushUtil.q(this.c8, 0.6), igniteuiWebcomponentsCore.BrushUtil.q(this.dc, 0.1));
+                this.view.ak(igniteuiWebcomponentsCore.BrushUtil.q(this.c8, 0.6), igniteuiWebcomponentsCore.BrushUtil.q(this.dc, 0.1));
             }
         };
         Object.defineProperty(XCheckbox.prototype, "a", {
@@ -30009,12 +30279,12 @@
             configurable: true
         });
         XCheckbox.prototype.ck = function () {
-            this.view.z();
+            this.view.aa();
             var a = false;
             if (this.o == null) {
                 if (!a) {
                     a = true;
-                    this.view.ag();
+                    this.view.ah();
                 }
                 this.o = igniteuiWebcomponentsCore.KeyFrameAnimationFactory.f.c(this.view.a(this.a).m(new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(2, this.db), new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(3, this.dc)).m(new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(2, this.c8), new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(3, this.c9)));
                 this.p = igniteuiWebcomponentsCore.KeyFrameAnimationFactory.f.c(this.view.b(this.a).m(new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(19, 24), new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(1, 0)).m(new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(19, 0), new igniteuiWebcomponentsCore.AnimationKeyFrameProperty(1, 1)));
@@ -30055,46 +30325,47 @@
                 c = -1;
             }
             if (b) {
-                this.view.aj(igniteuiWebcomponentsCore.BrushUtil.q(this.c8, 0.6), igniteuiWebcomponentsCore.BrushUtil.q(this.c8, 0.1));
+                this.view.ak(igniteuiWebcomponentsCore.BrushUtil.q(this.c8, 0.6), igniteuiWebcomponentsCore.BrushUtil.q(this.c8, 0.1));
             }
             else {
-                this.view.aj(igniteuiWebcomponentsCore.BrushUtil.q(this.c8, 0.6), igniteuiWebcomponentsCore.BrushUtil.q(this.dc, 0.1));
+                this.view.ak(igniteuiWebcomponentsCore.BrushUtil.q(this.c8, 0.6), igniteuiWebcomponentsCore.BrushUtil.q(this.dc, 0.1));
             }
             if (!this.indeterminate) {
-                igniteuiWebcomponentsCore.NativeUI.af(this.view.t, null);
+                igniteuiWebcomponentsCore.NativeUI.af(this.view.u, null);
             }
             if (this.z || this.indeterminate || a) {
-                var d = this.view.s;
-                var e = this.view.t;
+                var d = this.view.t;
+                var e = this.view.s;
+                var f = this.view.u;
                 if (this.indeterminate) {
-                    var f = new igniteuiWebcomponentsCore.TransformGroup();
-                    f.j.add(((function () {
+                    var g = new igniteuiWebcomponentsCore.TransformGroup();
+                    g.j.add(((function () {
                         var $ret = new igniteuiWebcomponentsCore.RotateTransform();
                         $ret.j = 45;
                         return $ret;
                     })()));
-                    f.j.add(((function () {
+                    g.j.add(((function () {
                         var $ret = new igniteuiWebcomponentsCore.TranslateTransform();
                         $ret.j = -_this.view.k();
                         return $ret;
                     })()));
                     igniteuiWebcomponentsCore.NativeUI.m(d, this.c8);
-                    igniteuiWebcomponentsCore.NativeUI.n(d, this.c9);
-                    igniteuiWebcomponentsCore.NativeUI.y(e, 1);
-                    igniteuiWebcomponentsCore.NativeUI.ac(e, 41);
-                    igniteuiWebcomponentsCore.NativeUI.af(e, f);
+                    igniteuiWebcomponentsCore.NativeUI.n(e, this.c9);
+                    igniteuiWebcomponentsCore.NativeUI.y(f, 1);
+                    igniteuiWebcomponentsCore.NativeUI.ac(f, 41);
+                    igniteuiWebcomponentsCore.NativeUI.af(f, g);
                 }
                 else if (b) {
                     igniteuiWebcomponentsCore.NativeUI.m(d, this.c8);
-                    igniteuiWebcomponentsCore.NativeUI.n(d, this.c9);
-                    igniteuiWebcomponentsCore.NativeUI.y(e, 1);
-                    igniteuiWebcomponentsCore.NativeUI.ac(e, 0);
+                    igniteuiWebcomponentsCore.NativeUI.n(e, this.c9);
+                    igniteuiWebcomponentsCore.NativeUI.y(f, 1);
+                    igniteuiWebcomponentsCore.NativeUI.ac(f, 0);
                 }
                 else {
                     igniteuiWebcomponentsCore.NativeUI.m(d, this.db);
-                    igniteuiWebcomponentsCore.NativeUI.n(d, this.dc);
-                    igniteuiWebcomponentsCore.NativeUI.y(e, 0);
-                    igniteuiWebcomponentsCore.NativeUI.ac(e, 24);
+                    igniteuiWebcomponentsCore.NativeUI.n(e, this.dc);
+                    igniteuiWebcomponentsCore.NativeUI.y(f, 0);
+                    igniteuiWebcomponentsCore.NativeUI.ac(f, 24);
                 }
                 if (this.o.playState == 1) {
                     this.o.cancel();
@@ -30106,13 +30377,13 @@
             }
             if ((c > 0 && this.o.playbackRate < 0) || (c < 0 && this.o.playbackRate > 0)) {
                 this.o.reverse();
-                this.o.finished.f(function (g) {
+                this.o.finished.f(function (h) {
                     if (_this.o != null) {
                         _this.o.commitStyles();
                     }
                 });
                 this.p.reverse();
-                this.p.finished.f(function (g) {
+                this.p.finished.f(function (h) {
                     if (_this.p != null) {
                         _this.p.commitStyles();
                     }
@@ -30120,13 +30391,13 @@
             }
             else {
                 this.o.play();
-                this.o.finished.f(function (g) {
+                this.o.finished.f(function (h) {
                     if (_this.o != null) {
                         _this.o.commitStyles();
                     }
                 });
                 this.p.play();
-                this.p.finished.f(function (g) {
+                this.p.finished.f(function (h) {
                     if (_this.p != null) {
                         _this.p.commitStyles();
                     }
@@ -30134,10 +30405,10 @@
             }
         };
         XCheckbox.prototype.onDetachedFromUI = function () {
-            this.view.ad();
+            this.view.ae();
         };
         XCheckbox.prototype.onAttachedToUI = function () {
-            this.view.ab();
+            this.view.ac();
         };
         XCheckbox.prototype.onContentReady = function () {
             if (this.indeterminate) {
@@ -30177,7 +30448,7 @@
             return a;
         };
         XCheckbox.prototype.provideContainer = function (a) {
-            this.view.ac(a);
+            this.view.ad(a);
         };
         XCheckbox.$t = igniteuiWebcomponentsCore.markType(XCheckbox, 'XCheckbox', igniteuiWebcomponentsCore.Base.$, [igniteuiWebcomponentsCore.INotifyPropertyChanged_$type]);
         XCheckbox.g = ThemeResolver.a(((function () {
@@ -35266,6 +35537,12 @@
                 case 58:
                     d.aq = c;
                     break;
+                case 17:
+                    d.kt = c;
+                    break;
+                case 11:
+                    d.aa = c;
+                    break;
             }
         };
         XButtonBridge.prototype.getValue = function (a, b) {
@@ -35300,6 +35577,7 @@
                 case 57: return c.av;
                 case 56: return c.as;
                 case 58: return c.aq;
+                case 17: return c.kt;
             }
             return null;
         };
@@ -35452,13 +35730,16 @@
             switch (b) {
                 case 16: return this.v;
                 case 15: return this.u;
-                case 18: return igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.BaseControlTheme_$type, c.i);
-                case 44: return c.al;
-                case 45: return c.am;
-                case 46: return c.an;
-                case 47: return c.ak;
-                case 48: return c.ao;
-                case 49: return c.ag;
+                case 18: return igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.BaseControlTheme_$type, c.k);
+                case 44: return c.an;
+                case 45: return c.ao;
+                case 46: return c.ap;
+                case 47: return c.am;
+                case 48: return c.aq;
+                case 49: return c.ai;
+                case 62: return c.e;
+                case 63: return c.f;
+                case 64: return c.al;
             }
             return _super.prototype.getValue.call(this, a, b);
         };
@@ -35469,51 +35750,72 @@
                 case 15:
                     {
                         this.u = c;
-                        var e = igniteuiWebcomponentsCore.SvgIconRegistry.instance.getSvgPathString(this.u, this.v);
-                        if (e != null) {
-                            if (igniteuiWebcomponentsCore.stringStartsWith(igniteuiWebcomponentsCore.trimStart(e, ' ', '\n', '\r', '\t'), "<svg")) {
-                                d.svg = e;
-                            }
-                            else {
-                                d.svgPath = e;
-                            }
-                        }
+                        this.w(d);
                     }
                     break;
                 case 16:
                     {
                         this.v = c;
-                        var f = igniteuiWebcomponentsCore.SvgIconRegistry.instance.getSvgPathString(this.u, this.v);
-                        if (f != null) {
-                            if (igniteuiWebcomponentsCore.stringStartsWith(igniteuiWebcomponentsCore.trimStart(f, ' ', '\n', '\r', '\t'), "<svg")) {
-                                d.svg = f;
-                            }
-                            else {
-                                d.svgPath = f;
-                            }
-                        }
+                        this.w(d);
                     }
                     break;
                 case 44:
-                    d.al = c;
+                    d.an = c;
                     break;
                 case 45:
-                    d.am = c;
+                    d.ao = c;
                     break;
                 case 46:
-                    d.an = c;
+                    d.ap = c;
                     break;
                 case 47:
-                    d.ak = c;
+                    d.am = c;
                     break;
                 case 48:
-                    d.ao = c;
+                    d.aq = c;
                     break;
                 case 49:
-                    d.ag = c;
+                    d.ai = c;
+                    break;
+                case 62:
+                    d.e = c;
+                    break;
+                case 63:
+                    d.f = c;
+                    break;
+                case 64:
+                    d.al = c;
                     break;
             }
         };
+        XIconBridge.prototype.getTargetForProperty = function (a, b) {
+            switch (a) {
+                case 24: return b;
+            }
+            return _super.prototype.getTargetForProperty.call(this, a, b);
+        };
+        XIconBridge.prototype.w = function (a) {
+            var b = igniteuiWebcomponentsCore.SvgIconRegistry.instance.getSvgPathString(this.u, this.v);
+            if (b != null) {
+                if (igniteuiWebcomponentsCore.stringStartsWith(igniteuiWebcomponentsCore.trimStart(b, ' ', '\n', '\r', '\t'), "<svg")) {
+                    a.svg = b;
+                }
+                else {
+                    a.svgPath = b;
+                }
+                return;
+            }
+            var c = igniteuiWebcomponentsCore.SvgIconRegistry.instance.getSvgPathsString(this.u, this.v);
+            if (c != null) {
+                a.b = c;
+                return;
+            }
+            var d = igniteuiWebcomponentsCore.SvgIconRegistry.instance.getDataURLString(this.u, this.v);
+            if (d != null) {
+                a.a7 = d;
+                return;
+            }
+        };
         XIconBridge.$t = igniteuiWebcomponentsCore.markType(XIconBridge, 'XIconBridge', XComponentBridge.$);
         return XIconBridge;
     }(XComponentBridge));
@@ -35943,7 +36245,7 @@
             var o = new igniteuiWebcomponentsCore.NativeUIButton();
             o.al = j;
             o.d = n;
-            o.bj = i;
+            o.bk = i;
             b(o);
         };
         NativeUIXInputsFactory.prototype.f = function (a, b) {
@@ -36010,7 +36312,7 @@
             switch (a) {
                 case 16:
                 case 15:
-                case 17: return this.al.t.view.o;
+                case 17: return this.al.t.view.t;
             }
             return _super.prototype.getTargetForProperty.call(this, a, b);
         };