igniteui-webcomponents-inputs 5.0.2 → 5.1.0

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

@@ -8592,14 +8592,14 @@
             d.setStyleProperty("width", "100%");
             d.setStyleProperty("object-fit", "contain");
             this.x = d;
-            this.aw();
+            this.ax();
             this.w = a.createElementNS("defs", "http://www.w3.org/2000/svg");
             this.y.append(this.w);
             this.v.append(this.y);
             this.o.add(c.listen("click", igniteuiWebcomponentsCore.runOn(this, this.ah)));
-            this.d.cc();
+            this.d.cf();
         };
-        IconView.prototype.at = function (a) {
+        IconView.prototype.au = function (a) {
             this.n.clear();
             this.v.rootWrapper.removeChildren();
             this.v.rootWrapper.append(this.y);
@@ -8614,7 +8614,7 @@
                 this.p.add(b);
             }
         };
-        IconView.prototype.au = function (a) {
+        IconView.prototype.av = function (a) {
             this.n.clear();
             this.v.rootWrapper.removeChildren();
             this.v.rootWrapper.append(this.y);
@@ -8631,7 +8631,7 @@
                 }
             }
         };
-        IconView.prototype.as = function (a) {
+        IconView.prototype.at = function (a) {
             this.v.rootWrapper.removeChildren();
             if (a != null) {
                 var b = this.v.rootWrapper.getNativeElement();
@@ -8646,6 +8646,11 @@
                 this.x.setAttribute("src", a);
             }
         };
+        IconView.prototype.as = function (a) {
+            if (typeof a === 'string') {
+                this.ap(igniteuiWebcomponentsCore.typeCast(igniteuiWebcomponentsCore.String_$type, a));
+            }
+        };
         IconView.prototype.k = function () {
             return this.d.svgPath != null || this.d.svg != null || this.d.b != null;
         };
@@ -8653,7 +8658,7 @@
             this.v.rootWrapper.setStyleProperty("width", igniteuiWebcomponentsCore.isNaN_(this.d.aq) ? "1.5rem" : this.d.aq + "px");
             this.v.rootWrapper.setStyleProperty("height", igniteuiWebcomponentsCore.isNaN_(this.d.ai) ? "1.5rem" : this.d.ai + "px");
         };
-        IconView.prototype.aw = function () {
+        IconView.prototype.ax = 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;
@@ -8715,10 +8720,10 @@
             }
         };
         IconView.prototype.ad = function (a) {
-            this.d.b9();
+            this.d.cc();
         };
         IconView.prototype.ae = function (a) {
-            this.d.ca();
+            this.d.cd();
         };
         IconView.prototype.ag = function () {
             this.j = true;
@@ -8749,7 +8754,7 @@
             }
             this.o.clear();
         };
-        IconView.prototype.av = function (a) {
+        IconView.prototype.aw = function (a) {
             if (a != null) {
                 this.v.rootWrapper.setStyleProperty("font", a.fontString);
             }
@@ -8764,7 +8769,7 @@
             return c;
         };
         IconView.prototype.ah = function (a) {
-            this.d.b7();
+            this.d.ca();
         };
         IconView.prototype.a = function () {
             var a = new igniteuiWebcomponentsCore.List$1(igniteuiWebcomponentsCore.PrimitiveVisualData.$, 0);
@@ -8872,33 +8877,34 @@
             var _this = _super.call(this) || this;
             _this._view = null;
             _this.j = 0;
-            _this.cj = XIcon.cz;
-            _this.ck = XIcon.c3;
-            _this.cl = XIcon.c4;
+            _this.cm = XIcon.c2;
+            _this.cn = XIcon.c6;
+            _this.co = XIcon.c7;
             _this.v = XIcon.ah;
-            _this.cm = XIcon.cz;
-            _this.cu = XIcon.c3;
+            _this.cp = XIcon.c2;
+            _this.cx = XIcon.c6;
             _this.z = XIcon.ah;
-            _this.cv = XIcon.c4;
-            _this.cn = XIcon.c0;
-            _this.co = XIcon.c1;
+            _this.cy = XIcon.c7;
+            _this.cq = XIcon.c3;
+            _this.cr = XIcon.c4;
             _this.x = XIcon.ag;
-            _this.cp = null;
+            _this.cs = null;
             _this.c = null;
             _this.d = null;
-            _this.cq = null;
-            _this.cr = null;
-            _this.cs = null;
             _this.ct = null;
-            _this.aw = null;
-            _this.az = null;
+            _this.cu = null;
+            _this.cv = null;
+            _this.cw = null;
+            _this.au = null;
             _this.ay = null;
+            _this.a1 = null;
+            _this.a0 = null;
             _this.a = null;
             _this.l = null;
-            _this.ax = "ig-icon-" + XIcon.at++;
+            _this.az = "ig-icon-" + XIcon.at++;
             _this.ar = 0;
             _this.n = false;
-            _this.av = null;
+            _this.ax = null;
             _this.p = false;
             _this.o = false;
             _this.y = 1;
@@ -8929,13 +8935,13 @@
         XIcon.prototype.destroy = function () {
             this.provideContainer(null);
         };
-        XIcon.prototype.cb = function (a, b, c) {
+        XIcon.prototype.ce = function (a, b, c) {
             if (this.propertyChanged != null) {
                 this.propertyChanged(this, new igniteuiWebcomponentsCore.PropertyChangedEventArgs(a));
             }
-            this.ce(a, b, c);
+            this.ch(a, b, c);
         };
-        XIcon.prototype.ce = function (a, b, c) {
+        XIcon.prototype.ch = function (a, b, c) {
             switch (a) {
                 case "Fill":
                 case "Stroke":
@@ -8944,44 +8950,50 @@
                 case "HoverStroke":
                 case "HoverStrokeThickness":
                 case "IsHover":
-                    this.ci();
+                    this.cl();
                     break;
                 case "FillColors":
                 case "StrokeColors":
                 case "ActualFill":
                 case "ActualStroke":
                 case "ActualStrokeWidth":
-                    this.cg();
+                    this.cj();
                     break;
                 case "SVG":
-                    this.az = null;
+                    this.a1 = null;
                     this.a = null;
-                    this.cg();
+                    this.cj();
                     break;
                 case "SVGPath":
-                    this.ay = null;
+                    this.a0 = null;
                     this.a = null;
-                    this.cg();
+                    this.cj();
                     break;
                 case "SVGPaths":
-                    this.ay = null;
-                    this.az = null;
-                    this.cg();
+                    this.a0 = null;
+                    this.a1 = null;
+                    this.cj();
                     break;
                 case "DataURL":
-                    this.ay = null;
-                    this.az = null;
+                    this.a0 = null;
+                    this.a1 = null;
                     this.a = null;
-                    this.cg();
+                    this.cj();
+                    break;
+                case "Source":
+                    this.a0 = null;
+                    this.a1 = null;
+                    this.a = null;
+                    this.cj();
                     break;
                 case "Opacity":
-                    this.ch();
+                    this.ck();
                     break;
                 case "ViewBoxLeft":
                 case "ViewBoxTop":
                 case "ViewBoxWidth":
                 case "ViewBoxHeight":
-                    this.view.aw();
+                    this.view.ax();
                     break;
                 case "Width":
                 case "Height":
@@ -8989,22 +9001,22 @@
                     break;
             }
         };
-        XIcon.prototype.ci = function () {
-            var a = this.fill != null ? this.fill : XIcon.cz;
-            var b = this.dc != null ? this.dc : XIcon.c3;
+        XIcon.prototype.cl = function () {
+            var a = this.fill != null ? this.fill : XIcon.c2;
+            var b = this.df != null ? this.df : XIcon.c6;
             var c = !igniteuiWebcomponentsCore.isNaN_(this.al) ? this.al : XIcon.ah;
-            var d = this.dd != null ? this.dd : XIcon.c4;
+            var d = this.dg != null ? this.dg : XIcon.c7;
             if (this.t) {
-                this.cw = this.c5 != null ? this.c5 : a;
-                this.cx = this.c6 != null ? this.c6 : b;
+                this.cz = this.c8 != null ? this.c8 : a;
+                this.c0 = this.c9 != null ? this.c9 : b;
                 this.af = !igniteuiWebcomponentsCore.isNaN_(this.aj) ? this.aj : c;
-                this.cy = this.c7 != null ? this.c7 : d;
+                this.c1 = this.da != null ? this.da : d;
             }
             else {
-                this.cw = a;
-                this.cx = b;
+                this.cz = a;
+                this.c0 = b;
                 this.af = c;
-                this.cy = d;
+                this.c1 = d;
             }
         };
         Object.defineProperty(XIcon.prototype, "r", {
@@ -9014,49 +9026,49 @@
             enumerable: false,
             configurable: true
         });
-        XIcon.prototype.ch = function () {
+        XIcon.prototype.ck = function () {
             igniteuiWebcomponentsCore.NativeUI.y(this.view.z, this.ak);
         };
-        XIcon.prototype.cg = function () {
+        XIcon.prototype.cj = function () {
             var a = this.view.z;
             if (this.r) {
                 var b = this.view.aa;
-                igniteuiWebcomponentsCore.NativeUI.r(b, this.cw);
-                igniteuiWebcomponentsCore.NativeUI.aa(b, this.cx);
+                igniteuiWebcomponentsCore.NativeUI.r(b, this.cz);
+                igniteuiWebcomponentsCore.NativeUI.aa(b, this.c0);
                 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.as(this.svgPath);
+                        this.view.at(this.svgPath);
                         c = true;
                     }
                     else {
-                        this.view.at(this.svgPath);
+                        this.view.au(this.svgPath);
                     }
                 }
                 else if (this.b != null) {
-                    this.view.au(this.b);
+                    this.view.av(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();
+                        this.cg();
                         e = igniteuiWebcomponentsCore.runOn(this.view, this.view.an);
                         f = igniteuiWebcomponentsCore.runOn(this.view, this.view.ao);
                         for (var g = 0; g < d.length; g++) {
-                            if (this.cw != null) {
-                                e(d[g], this.cw);
+                            if (this.cz != null) {
+                                e(d[g], this.cz);
                             }
-                            if (this.cx != null) {
-                                f(d[g], this.cx);
+                            if (this.c0 != null) {
+                                f(d[g], this.c0);
                             }
                             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.c1 != null) {
+                                igniteuiWebcomponentsCore.NativeUI.q(d[g], this.c1);
                             }
                             if (this.e != null && this.e.count == d.length) {
                                 e(d[g], this.e.item(g));
@@ -9067,33 +9079,36 @@
                         }
                     }
                     if (this.m != null) {
-                        this.view.av(this.m);
+                        this.view.aw(this.m);
                     }
                     return;
                 }
                 else if (this.svg != null) {
-                    this.view.as(this.svg);
+                    this.view.at(this.svg);
                     c = true;
                 }
-                else if (this.a7 != null) {
-                    this.view.ap(this.a7);
+                else if (this.a9 != null) {
+                    this.view.ap(this.a9);
+                }
+                else if (this.aw != null) {
+                    this.view.as(this.aw);
                 }
                 if (c) {
                     for (var h = 0; h < this.view.r.count; h++) {
                         var i = this.view.r._inner[h].c;
-                        igniteuiWebcomponentsCore.NativeUI.r(this.view.r._inner[h].d, i.l.f(this.c8));
+                        igniteuiWebcomponentsCore.NativeUI.r(this.view.r._inner[h].d, i.l.f(this.db));
                     }
                     for (var j = 0; j < this.view.s.count; j++) {
                         var k = this.view.s._inner[j].c;
-                        igniteuiWebcomponentsCore.NativeUI.aa(this.view.s._inner[j].d, k.m.f(this.c9));
+                        igniteuiWebcomponentsCore.NativeUI.aa(this.view.s._inner[j].d, k.m.f(this.dc));
                     }
                     for (var l = 0; l < this.view.t.count; l++) {
                         var m = this.view.t._inner[l].c;
-                        igniteuiWebcomponentsCore.NativeUI.r(this.view.t._inner[l].d, m.l.f(this.da));
+                        igniteuiWebcomponentsCore.NativeUI.r(this.view.t._inner[l].d, m.l.f(this.dd));
                     }
                     for (var n = 0; n < this.view.u.count; n++) {
                         var o = this.view.u._inner[n].c;
-                        igniteuiWebcomponentsCore.NativeUI.aa(this.view.u._inner[n].d, o.m.f(this.db));
+                        igniteuiWebcomponentsCore.NativeUI.aa(this.view.u._inner[n].d, o.m.f(this.de));
                     }
                     for (var p = 0; p < this.view.e.o.count; p++) {
                         var q = this.view.e.o._inner[p];
@@ -9119,35 +9134,35 @@
                     }
                     for (var ab = 0; ab < this.view.q.count; ab++) {
                         var ac = this.view.q._inner[ab].c;
-                        igniteuiWebcomponentsCore.NativeUI.r(this.view.q._inner[ab].d, ac.l.f(this.cw));
-                        igniteuiWebcomponentsCore.NativeUI.aa(this.view.q._inner[ab].d, ac.m.f(this.cx));
+                        igniteuiWebcomponentsCore.NativeUI.r(this.view.q._inner[ab].d, ac.l.f(this.cz));
+                        igniteuiWebcomponentsCore.NativeUI.aa(this.view.q._inner[ab].d, ac.m.f(this.c0));
                     }
                 }
                 var ad = this.view.z;
-                if (this.cw != null) {
-                    igniteuiWebcomponentsCore.NativeUI.r(ad, this.cw);
+                if (this.cz != null) {
+                    igniteuiWebcomponentsCore.NativeUI.r(ad, this.cz);
                 }
-                if (this.cx != null) {
-                    igniteuiWebcomponentsCore.NativeUI.aa(ad, this.cx);
+                if (this.c0 != null) {
+                    igniteuiWebcomponentsCore.NativeUI.aa(ad, this.c0);
                 }
                 if (!igniteuiWebcomponentsCore.isNaN_(this.af)) {
                     igniteuiWebcomponentsCore.NativeUI.ad(ad, this.af);
                 }
             }
             if (this.m != null) {
-                this.view.av(this.m);
+                this.view.aw(this.m);
             }
-            if (this.cy != null) {
-                igniteuiWebcomponentsCore.NativeUI.q(this.view.z, this.cy);
+            if (this.c1 != null) {
+                igniteuiWebcomponentsCore.NativeUI.q(this.view.z, this.c1);
             }
         };
-        XIcon.prototype.cd = function () {
+        XIcon.prototype.cg = function () {
             var e_3, _a, e_4, _b;
-            if (this.cw != null) {
-                this.view.am(this.cw, "fill");
+            if (this.cz != null) {
+                this.view.am(this.cz, "fill");
             }
-            if (this.cx != null) {
-                this.view.am(this.cx, "stroke");
+            if (this.c0 != null) {
+                this.view.am(this.c0, "stroke");
             }
             if (this.e != null) {
                 try {
@@ -9200,49 +9215,49 @@
                 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));
+                    this.ce("BaseTheme", igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.BaseControlTheme_$type, b), igniteuiWebcomponentsCore.enumGetBox(igniteuiWebcomponentsCore.BaseControlTheme_$type, a));
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "cw", {
+        Object.defineProperty(XIcon.prototype, "cz", {
             get: function () {
-                return this.cj;
+                return this.cm;
             },
             set: function (a) {
-                var b = this.cj;
-                this.cj = a;
-                if (b != this.cj) {
-                    this.cb("ActualFill", b, a);
+                var b = this.cm;
+                this.cm = a;
+                if (b != this.cm) {
+                    this.ce("ActualFill", b, a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "cx", {
+        Object.defineProperty(XIcon.prototype, "c0", {
             get: function () {
-                return this.ck;
+                return this.cn;
             },
             set: function (a) {
-                var b = this.ck;
-                this.ck = a;
-                if (b != this.ck) {
-                    this.cb("ActualStroke", b, a);
+                var b = this.cn;
+                this.cn = a;
+                if (b != this.cn) {
+                    this.ce("ActualStroke", b, a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "cy", {
+        Object.defineProperty(XIcon.prototype, "c1", {
             get: function () {
-                return this.cl;
+                return this.co;
             },
             set: function (a) {
-                var b = this.cl;
-                this.cl = a;
-                if (b != this.cl) {
-                    this.cb("ActualTextColor", b, a);
+                var b = this.co;
+                this.co = a;
+                if (b != this.co) {
+                    this.ce("ActualTextColor", b, a);
                 }
             },
             enumerable: false,
@@ -9256,7 +9271,7 @@
                 var b = this.v;
                 this.v = a;
                 if (b != this.v) {
-                    this.cb("ActualStrokeWidth", b, a);
+                    this.ce("ActualStrokeWidth", b, a);
                 }
             },
             enumerable: false,
@@ -9264,27 +9279,27 @@
         });
         Object.defineProperty(XIcon.prototype, "fill", {
             get: function () {
-                return this.cm;
+                return this.cp;
             },
             set: function (a) {
-                var b = this.cm;
-                this.cm = a;
-                if (b != this.cm) {
-                    this.cb("Fill", b, a);
+                var b = this.cp;
+                this.cp = a;
+                if (b != this.cp) {
+                    this.ce("Fill", b, a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "dc", {
+        Object.defineProperty(XIcon.prototype, "df", {
             get: function () {
-                return this.cu;
+                return this.cx;
             },
             set: function (a) {
-                var b = this.cu;
-                this.cu = a;
-                if (b != this.cu) {
-                    this.cb("Stroke", b, a);
+                var b = this.cx;
+                this.cx = a;
+                if (b != this.cx) {
+                    this.ce("Stroke", b, a);
                 }
             },
             enumerable: false,
@@ -9298,49 +9313,49 @@
                 var b = this.z;
                 this.z = a;
                 if (b != this.z) {
-                    this.cb("StrokeWidth", b, a);
+                    this.ce("StrokeWidth", b, a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "dd", {
+        Object.defineProperty(XIcon.prototype, "dg", {
             get: function () {
-                return this.cv;
+                return this.cy;
             },
             set: function (a) {
-                var b = this.cv;
-                this.cv = a;
-                if (b != this.cv) {
-                    this.cb("TextColor", b, a);
+                var b = this.cy;
+                this.cy = a;
+                if (b != this.cy) {
+                    this.ce("TextColor", b, a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "c5", {
+        Object.defineProperty(XIcon.prototype, "c8", {
             get: function () {
-                return this.cn;
+                return this.cq;
             },
             set: function (a) {
-                var b = this.cn;
-                this.cn = a;
-                if (b != this.cn) {
-                    this.cb("HoverFill", b, a);
+                var b = this.cq;
+                this.cq = a;
+                if (b != this.cq) {
+                    this.ce("HoverFill", b, a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "c6", {
+        Object.defineProperty(XIcon.prototype, "c9", {
             get: function () {
-                return this.co;
+                return this.cr;
             },
             set: function (a) {
-                var b = this.co;
-                this.co = a;
-                if (b != this.co) {
-                    this.cb("HoverStroke", b, a);
+                var b = this.cr;
+                this.cr = a;
+                if (b != this.cr) {
+                    this.ce("HoverStroke", b, a);
                 }
             },
             enumerable: false,
@@ -9354,21 +9369,21 @@
                 var b = this.x;
                 this.x = a;
                 if (b != this.x) {
-                    this.cb("HoverStrokeThickness", b, a);
+                    this.ce("HoverStrokeThickness", b, a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "c7", {
+        Object.defineProperty(XIcon.prototype, "da", {
             get: function () {
-                return this.cp;
+                return this.cs;
             },
             set: function (a) {
-                var b = this.cp;
-                this.cp = a;
-                if (b != this.cp) {
-                    this.cb("HoverTextColor", b, a);
+                var b = this.cs;
+                this.cs = a;
+                if (b != this.cs) {
+                    this.ce("HoverTextColor", b, a);
                 }
             },
             enumerable: false,
@@ -9382,7 +9397,7 @@
                 var b = this.c;
                 this.c = a;
                 if (b != this.c) {
-                    this.cb("FillColors", b, this.c);
+                    this.ce("FillColors", b, this.c);
                 }
             },
             enumerable: false,
@@ -9396,77 +9411,91 @@
                 var b = this.d;
                 this.d = a;
                 if (b != this.d) {
-                    this.cb("StrokeColors", b, this.d);
+                    this.ce("StrokeColors", b, this.d);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "c8", {
+        Object.defineProperty(XIcon.prototype, "db", {
             get: function () {
-                return this.cq;
+                return this.ct;
             },
             set: function (a) {
-                var b = this.cq;
-                this.cq = a;
-                if (b != this.cq) {
-                    this.cb("PrimaryFillColor", b, this.cq);
+                var b = this.ct;
+                this.ct = a;
+                if (b != this.ct) {
+                    this.ce("PrimaryFillColor", b, this.ct);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "c9", {
+        Object.defineProperty(XIcon.prototype, "dc", {
             get: function () {
-                return this.cr;
+                return this.cu;
             },
             set: function (a) {
-                var b = this.cr;
-                this.cr = a;
-                if (b != this.cr) {
-                    this.cb("PrimaryStrokeColor", b, this.cr);
+                var b = this.cu;
+                this.cu = a;
+                if (b != this.cu) {
+                    this.ce("PrimaryStrokeColor", b, this.cu);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "da", {
+        Object.defineProperty(XIcon.prototype, "dd", {
             get: function () {
-                return this.cs;
+                return this.cv;
             },
             set: function (a) {
-                var b = this.cs;
-                this.cs = a;
-                if (b != this.cs) {
-                    this.cb("SecondaryFillColor", b, this.cs);
+                var b = this.cv;
+                this.cv = a;
+                if (b != this.cv) {
+                    this.ce("SecondaryFillColor", b, this.cv);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "db", {
+        Object.defineProperty(XIcon.prototype, "de", {
             get: function () {
-                return this.ct;
+                return this.cw;
             },
             set: function (a) {
-                var b = this.ct;
-                this.ct = a;
-                if (b != this.ct) {
-                    this.cb("SecondaryStrokeColor", b, this.ct);
+                var b = this.cw;
+                this.cw = a;
+                if (b != this.cw) {
+                    this.ce("SecondaryStrokeColor", b, this.cw);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "a7", {
+        Object.defineProperty(XIcon.prototype, "aw", {
             get: function () {
-                return this.aw;
+                return this.au;
             },
             set: function (a) {
-                var b = this.aw;
-                this.aw = a;
-                if (b != this.aw) {
-                    this.cb("DataURL", b, a);
+                var b = this.au;
+                this.au = a;
+                if (b != this.au) {
+                    this.ce("Source", b, a);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(XIcon.prototype, "a9", {
+            get: function () {
+                return this.ay;
+            },
+            set: function (a) {
+                var b = this.ay;
+                this.ay = a;
+                if (b != this.ay) {
+                    this.ce("DataURL", b, a);
                 }
             },
             enumerable: false,
@@ -9474,13 +9503,13 @@
         });
         Object.defineProperty(XIcon.prototype, "svgPath", {
             get: function () {
-                return this.az;
+                return this.a1;
             },
             set: function (a) {
-                var b = this.az;
-                this.az = a;
-                if (b != this.az) {
-                    this.cb("SVGPath", b, a);
+                var b = this.a1;
+                this.a1 = a;
+                if (b != this.a1) {
+                    this.ce("SVGPath", b, a);
                 }
             },
             enumerable: false,
@@ -9488,13 +9517,13 @@
         });
         Object.defineProperty(XIcon.prototype, "svg", {
             get: function () {
-                return this.ay;
+                return this.a0;
             },
             set: function (a) {
-                var b = this.ay;
-                this.ay = a;
-                if (b != this.ay) {
-                    this.cb("SVG", b, this.ay);
+                var b = this.a0;
+                this.a0 = a;
+                if (b != this.a0) {
+                    this.ce("SVG", b, this.a0);
                 }
             },
             enumerable: false,
@@ -9508,16 +9537,16 @@
                 var b = this.a;
                 this.a = a;
                 if (b != this.a) {
-                    this.cb("SVGPaths", b, this.a);
+                    this.ce("SVGPaths", b, this.a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        XIcon.prototype.b9 = function () {
+        XIcon.prototype.cc = function () {
             this.t = true;
         };
-        XIcon.prototype.ca = function () {
+        XIcon.prototype.cd = function () {
             this.t = false;
         };
         Object.defineProperty(XIcon.prototype, "m", {
@@ -9528,21 +9557,21 @@
                 var b = this.l;
                 this.l = a;
                 if (b != this.l) {
-                    this.cb("TextStyle", b, a);
+                    this.ce("TextStyle", b, a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "bh", {
+        Object.defineProperty(XIcon.prototype, "bj", {
             get: function () {
-                return this.ax;
+                return this.az;
             },
             set: function (a) {
-                var b = this.ax;
-                this.ax = a;
-                if (b != this.ax) {
-                    this.cb("Id", b, a);
+                var b = this.az;
+                this.az = a;
+                if (b != this.az) {
+                    this.ce("Id", b, a);
                 }
             },
             enumerable: false,
@@ -9564,21 +9593,21 @@
                 this.ar = a;
                 this.n = true;
                 if (b != this.ar) {
-                    this.cb("TabIndex", b, a);
+                    this.ce("TabIndex", b, a);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(XIcon.prototype, "a4", {
+        Object.defineProperty(XIcon.prototype, "a6", {
             get: function () {
-                return this.av;
+                return this.ax;
             },
             set: function (a) {
-                var b = this.av;
-                this.av = a;
-                if (b != this.av) {
-                    this.cb("AriaLabel", b, a);
+                var b = this.ax;
+                this.ax = a;
+                if (b != this.ax) {
+                    this.ce("AriaLabel", b, a);
                 }
             },
             enumerable: false,
@@ -9592,7 +9621,7 @@
                 var b = this.p;
                 this.p = a;
                 if (b != this.p) {
-                    this.cb("IsHover", b, a);
+                    this.ce("IsHover", b, a);
                 }
             },
             enumerable: false,
@@ -9606,7 +9635,7 @@
                 var b = this.o;
                 this.o = a;
                 if (b != this.o) {
-                    this.cb("IsDisabled", b, a);
+                    this.ce("IsDisabled", b, a);
                 }
             },
             enumerable: false,
@@ -9620,7 +9649,7 @@
                 var b = this.y;
                 this.y = a;
                 if (b != this.y) {
-                    this.cb("Opacity", b, this.y);
+                    this.ce("Opacity", b, this.y);
                 }
             },
             enumerable: false,
@@ -9634,7 +9663,7 @@
                 var b = this.ab;
                 this.ab = a;
                 if (b != this.ab) {
-                    this.cb("ViewBoxLeft", b, this.ab);
+                    this.ce("ViewBoxLeft", b, this.ab);
                 }
             },
             enumerable: false,
@@ -9648,7 +9677,7 @@
                 var b = this.ac;
                 this.ac = a;
                 if (b != this.ac) {
-                    this.cb("ViewBoxTop", b, this.ac);
+                    this.ce("ViewBoxTop", b, this.ac);
                 }
             },
             enumerable: false,
@@ -9662,7 +9691,7 @@
                 var b = this.ad;
                 this.ad = a;
                 if (b != this.ad) {
-                    this.cb("ViewBoxWidth", b, this.ad);
+                    this.ce("ViewBoxWidth", b, this.ad);
                 }
             },
             enumerable: false,
@@ -9676,7 +9705,7 @@
                 var b = this.aa;
                 this.aa = a;
                 if (b != this.aa) {
-                    this.cb("ViewBoxHeight", b, this.aa);
+                    this.ce("ViewBoxHeight", b, this.aa);
                 }
             },
             enumerable: false,
@@ -9690,7 +9719,7 @@
                 var b = this.ae;
                 this.ae = a;
                 if (b != this.ae) {
-                    this.cb("Width", b, this.ae);
+                    this.ce("Width", b, this.ae);
                 }
             },
             enumerable: false,
@@ -9704,13 +9733,13 @@
                 var b = this.w;
                 this.w = a;
                 if (b != this.w) {
-                    this.cb("Height", b, this.w);
+                    this.ce("Height", b, this.w);
                 }
             },
             enumerable: false,
             configurable: true
         });
-        XIcon.prototype.cc = function () {
+        XIcon.prototype.cf = function () {
         };
         XIcon.prototype.onDetachedFromUI = function () {
             this.view.aj();
@@ -9718,7 +9747,7 @@
         XIcon.prototype.onAttachedToUI = function () {
             this.view.ag();
         };
-        XIcon.prototype.b7 = function () {
+        XIcon.prototype.ca = function () {
             if (this.disabled) {
                 return;
             }
@@ -9729,10 +9758,10 @@
         XIcon.prototype.u = function () {
             return this.view.l();
         };
-        XIcon.prototype.au = function () {
+        XIcon.prototype.av = function () {
             return this.g();
         };
-        XIcon.prototype.a9 = function () {
+        XIcon.prototype.bb = function () {
             var a = this.g();
             return a.l();
         };
@@ -9746,7 +9775,7 @@
             a.a = this.view.a();
             a.svg = this.svg;
             a.svgPath = this.svgPath;
-            a.k = this.a7;
+            a.k = this.a9;
             if (this.m != null) {
                 var c = this.m;
                 if (this.view != null && c.q == null) {
@@ -9781,12 +9810,12 @@
             this.view.ai(a);
         };
         XIcon.$t = igniteuiWebcomponentsCore.markType(XIcon, 'XIcon', igniteuiWebcomponentsCore.Base.$, [igniteuiWebcomponentsCore.INotifyPropertyChanged_$type, igniteuiWebcomponentsCore.IIcon_$type]);
-        XIcon.cz = null;
-        XIcon.c4 = null;
-        XIcon.c3 = null;
-        XIcon.c0 = null;
-        XIcon.c1 = null;
         XIcon.c2 = null;
+        XIcon.c7 = null;
+        XIcon.c6 = null;
+        XIcon.c3 = null;
+        XIcon.c4 = null;
+        XIcon.c5 = null;
         XIcon.ah = NaN;
         XIcon.ag = NaN;
         XIcon.at = 0;
@@ -10021,11 +10050,11 @@
              * Gets the fill color currently used by the icon.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.cw);
+                return igniteuiWebcomponentsCore.brushToString(this.i.cz);
             },
             set: function (v) {
-                this.i.cw = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("actualFill", igniteuiWebcomponentsCore.brushToString(this.i.cw));
+                this.i.cz = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("actualFill", igniteuiWebcomponentsCore.brushToString(this.i.cz));
             },
             enumerable: false,
             configurable: true
@@ -10035,11 +10064,11 @@
              * Gets the stroke color currently used by the icon.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.cx);
+                return igniteuiWebcomponentsCore.brushToString(this.i.c0);
             },
             set: function (v) {
-                this.i.cx = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("actualStroke", igniteuiWebcomponentsCore.brushToString(this.i.cx));
+                this.i.c0 = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("actualStroke", igniteuiWebcomponentsCore.brushToString(this.i.c0));
             },
             enumerable: false,
             configurable: true
@@ -10049,11 +10078,11 @@
              * Gets the text color currently used by the icon.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.cy);
+                return igniteuiWebcomponentsCore.brushToString(this.i.c1);
             },
             set: function (v) {
-                this.i.cy = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("actualTextColor", igniteuiWebcomponentsCore.brushToString(this.i.cy));
+                this.i.c1 = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("actualTextColor", igniteuiWebcomponentsCore.brushToString(this.i.c1));
             },
             enumerable: false,
             configurable: true
@@ -10091,11 +10120,11 @@
              * Gets or sets the stroke color to use for the icon.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.dc);
+                return igniteuiWebcomponentsCore.brushToString(this.i.df);
             },
             set: function (v) {
-                this.i.dc = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("stroke", igniteuiWebcomponentsCore.brushToString(this.i.dc));
+                this.i.df = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("stroke", igniteuiWebcomponentsCore.brushToString(this.i.df));
             },
             enumerable: false,
             configurable: true
@@ -10119,11 +10148,11 @@
              * Gets or sets the text color to use for the icon.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.dd);
+                return igniteuiWebcomponentsCore.brushToString(this.i.dg);
             },
             set: function (v) {
-                this.i.dd = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("textColor", igniteuiWebcomponentsCore.brushToString(this.i.dd));
+                this.i.dg = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("textColor", igniteuiWebcomponentsCore.brushToString(this.i.dg));
             },
             enumerable: false,
             configurable: true
@@ -10133,11 +10162,11 @@
              * Gets or sets the fill color to use when the icon is hovered.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.c5);
+                return igniteuiWebcomponentsCore.brushToString(this.i.c8);
             },
             set: function (v) {
-                this.i.c5 = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("hoverFill", igniteuiWebcomponentsCore.brushToString(this.i.c5));
+                this.i.c8 = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("hoverFill", igniteuiWebcomponentsCore.brushToString(this.i.c8));
             },
             enumerable: false,
             configurable: true
@@ -10147,11 +10176,11 @@
              * Gets or sets the stroke color to use when the icon is hovered.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.c6);
+                return igniteuiWebcomponentsCore.brushToString(this.i.c9);
             },
             set: function (v) {
-                this.i.c6 = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("hoverStroke", igniteuiWebcomponentsCore.brushToString(this.i.c6));
+                this.i.c9 = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("hoverStroke", igniteuiWebcomponentsCore.brushToString(this.i.c9));
             },
             enumerable: false,
             configurable: true
@@ -10175,11 +10204,11 @@
              * Gets or sets the text color to use when the icon is hovered.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.c7);
+                return igniteuiWebcomponentsCore.brushToString(this.i.da);
             },
             set: function (v) {
-                this.i.c7 = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("hoverTextColor", igniteuiWebcomponentsCore.brushToString(this.i.c7));
+                this.i.da = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("hoverTextColor", igniteuiWebcomponentsCore.brushToString(this.i.da));
             },
             enumerable: false,
             configurable: true
@@ -10227,11 +10256,11 @@
              * class.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.c8);
+                return igniteuiWebcomponentsCore.brushToString(this.i.db);
             },
             set: function (v) {
-                this.i.c8 = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("primaryFillColor", igniteuiWebcomponentsCore.brushToString(this.i.c8));
+                this.i.db = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("primaryFillColor", igniteuiWebcomponentsCore.brushToString(this.i.db));
             },
             enumerable: false,
             configurable: true
@@ -10245,11 +10274,11 @@
              * class.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.c9);
+                return igniteuiWebcomponentsCore.brushToString(this.i.dc);
             },
             set: function (v) {
-                this.i.c9 = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("primaryStrokeColor", igniteuiWebcomponentsCore.brushToString(this.i.c9));
+                this.i.dc = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("primaryStrokeColor", igniteuiWebcomponentsCore.brushToString(this.i.dc));
             },
             enumerable: false,
             configurable: true
@@ -10263,11 +10292,11 @@
              * class.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.da);
+                return igniteuiWebcomponentsCore.brushToString(this.i.dd);
             },
             set: function (v) {
-                this.i.da = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("secondaryFillColor", igniteuiWebcomponentsCore.brushToString(this.i.da));
+                this.i.dd = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("secondaryFillColor", igniteuiWebcomponentsCore.brushToString(this.i.dd));
             },
             enumerable: false,
             configurable: true
@@ -10281,11 +10310,24 @@
              * class.
             */
             get: function () {
-                return igniteuiWebcomponentsCore.brushToString(this.i.db);
+                return igniteuiWebcomponentsCore.brushToString(this.i.de);
             },
             set: function (v) {
-                this.i.db = igniteuiWebcomponentsCore.stringToBrush(v);
-                this._a("secondaryStrokeColor", igniteuiWebcomponentsCore.brushToString(this.i.db));
+                this.i.de = igniteuiWebcomponentsCore.stringToBrush(v);
+                this._a("secondaryStrokeColor", igniteuiWebcomponentsCore.brushToString(this.i.de));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(IgcXIconComponent.prototype, "source", {
+            /**
+             * Gets or sets the image source for the icon. Used if none of the other icon types are not used.
+            */
+            get: function () {
+                return this.i.aw;
+            },
+            set: function (v) {
+                this.i.aw = v;
             },
             enumerable: false,
             configurable: true
@@ -10295,10 +10337,10 @@
              * Gets or sets data url for the icon to use.
             */
             get: function () {
-                return this.i.a7;
+                return this.i.a9;
             },
             set: function (v) {
-                this.i.a7 = v;
+                this.i.a9 = v;
             },
             enumerable: false,
             configurable: true
@@ -10370,10 +10412,10 @@
              * Gets or sets the id to use for the checkbox.
             */
             get: function () {
-                return this.i.bh;
+                return this.i.bj;
             },
             set: function (v) {
-                this.i.bh = v;
+                this.i.bj = v;
             },
             enumerable: false,
             configurable: true
@@ -10397,10 +10439,10 @@
              * Gets or sets the value of the aria-label attribute.
             */
             get: function () {
-                return this.i.a4;
+                return this.i.a6;
             },
             set: function (v) {
-                this.i.a4 = v;
+                this.i.a6 = v;
             },
             enumerable: false,
             configurable: true
@@ -10604,7 +10646,7 @@
         
         */
         IgcXIconComponent.prototype.exportVisualModel = function () {
-            var iv = this.i.au();
+            var iv = this.i.av();
             return (iv);
         };
         /**
@@ -10612,7 +10654,7 @@
         
         */
         IgcXIconComponent.prototype.exportSerializedVisualModel = function () {
-            var iv = this.i.a9();
+            var iv = this.i.bb();
             return (iv);
         };
         IgcXIconComponent._observedAttributesIgcXIconComponent = null;
@@ -35962,12 +36004,16 @@
             }
             var d = igniteuiWebcomponentsCore.SvgIconRegistry.instance.getDataURLString(this.u, this.v);
             if (d != null) {
-                a.a7 = d;
+                a.a9 = d;
                 return;
             }
+            var e = igniteuiWebcomponentsCore.SvgIconRegistry.instance.getIconSource(this.u, this.v);
+            if (e != null) {
+                a.aw = e;
+            }
         };
         XIconBridge.prototype.exportVisualData = function (a) {
-            return a.au();
+            return a.av();
         };
         XIconBridge.$t = igniteuiWebcomponentsCore.markType(XIconBridge, 'XIconBridge', XComponentBridge.$);
         return XIconBridge;
@@ -36227,7 +36273,7 @@
             }
         };
         XPopupBridge.prototype.exportVisualData = function (a) {
-            return a.au();
+            return a.av();
         };
         XPopupBridge.prototype.addChild = function (a, b) {
             this.ac.add(b);