@aquera/nile-elements 1.0.1-beta-1.2 → 1.0.1-beta-1.4

package/src/nile-icon/icons/svg/index.ts

@@ -270,12 +270,15 @@ export { default as moveright } from './moveright';
 export { default as mute } from './mute';
 export { default as myintegration } from './my-integration';
 export { default as newcalendar } from './new-calendar';
+export { default as ngaction } from './ng-action';
 export { default as ngactivity } from './ng-activity';
+export { default as ngalertcircle } from './ng-alert-circle';
 export { default as ngaligncenter } from './ng-align-center';
 export { default as ngannotationx } from './ng-annotation-x';
 export { default as ngarrowdown } from './ng-arrow-down';
 export { default as ngarrownarrowdown } from './ng-arrow-narrow-down';
 export { default as ngarrownarrowleft } from './ng-arrow-narrow-left';
+export { default as ngarrownarrowright } from './ng-arrow-narrow-right';
 export { default as ngarrowup } from './ng-arrow-up';
 export { default as ngbarchart12 } from './ng-bar-chart-12';
 export { default as ngbell01 } from './ng-bell-01';
@@ -283,10 +286,14 @@ export { default as ngbellringing04 } from './ng-bell-ringing-04';
 export { default as ngbold01 } from './ng-bold-01';
 export { default as ngbuilding01 } from './ng-building-01';
 export { default as ngbuilding05 } from './ng-building-05';
+export { default as ngbuttonloadingblueanimated } from './ng-button-loading-blue-animated';
+export { default as ngbuttonloadingblue } from './ng-button-loading-blue';
 export { default as ngcalendarplus02 } from './ng-calendar-plus-02';
 export { default as ngcalendar } from './ng-calendar';
+export { default as ngcheckcirclebroken } from './ng-check-circle-broken';
 export { default as ngcheckcircle } from './ng-check-circle';
 export { default as ngchecksquarebroken } from './ng-check-square-broken';
+export { default as ngcheck } from './ng-check';
 export { default as ngchevrondown } from './ng-chevron-down';
 export { default as ngchevronleft } from './ng-chevron-left';
 export { default as ngchevronright } from './ng-chevron-right';
@@ -305,11 +312,13 @@ export { default as ngexpand06 } from './ng-expand-06';
 export { default as ngeyeoff } from './ng-eye-off';
 export { default as ngeye } from './ng-eye';
 export { default as ngfile02 } from './ng-file-02';
+export { default as ngfile06 } from './ng-file-06';
 export { default as ngfilecheck02 } from './ng-file-check-02';
 export { default as ngfilequestion03 } from './ng-file-question-03';
 export { default as ngfilterlines } from './ng-filter-lines';
 export { default as nggrid01 } from './ng-grid-01';
 export { default as nghelpcircle } from './ng-help-circle';
+export { default as ngimage03 } from './ng-image-03';
 export { default as ngimageuserleft } from './ng-image-user-left';
 export { default as nginfocircle } from './ng-info-circle';
 export { default as ngitalic01 } from './ng-italic-01';
@@ -322,6 +331,7 @@ export { default as ngmarkerpin01 } from './ng-marker-pin-01';
 export { default as ngmenu05 } from './ng-menu-05';
 export { default as ngmessagetextsquare01 } from './ng-message-text-square-01';
 export { default as ngminimize02 } from './ng-minimize-02';
+export { default as ngminus } from './ng-minus';
 export { default as ngplus } from './ng-plus';
 export { default as ngrefreshcw02 } from './ng-refresh-cw-02';
 export { default as ngrocket02 } from './ng-rocket-02';
@@ -343,6 +353,7 @@ export { default as ngusercheck02 } from './ng-user-check-02';
 export { default as nguserplus02 } from './ng-user-plus-02';
 export { default as nguserright01 } from './ng-user-right-01';
 export { default as ngusers01 } from './ng-users-01';
+export { default as ngxcircle } from './ng-x-circle';
 export { default as ngxclose } from './ng-x-close';
 export { default as ngxsquare } from './ng-x-square';
 export { default as nightingalechart } from './nightingale-chart';

package/src/nile-icon/icons/svg/ng-action.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjEuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBkPSJNMi45LDEyLjJsLTEuOSwyTDEuOSwxNWwxLjktMmwxLjQsMS4zbDIuNi02LjVsLTYuNCwzLjFMMi45LDEyLjJ6IE02LjMsOS41bC0xLjQsMy40bC0wLjUtMC41bC0wLjMtMC4ybC0wLjYtMC42TDMsMTEuMQkJTDYuMyw5LjV6Ii8+PHBhdGggZD0iTTkuMywxQzYuMiwxLDMuNiwzLjUsMy42LDYuNmMwLDAuMywwLDAuNywwLjEsMWgwLjlDNC41LDcuMyw0LjUsNyw0LjUsNi42YzAtMi42LDIuMi00LjgsNC44LTQuOHM0LjgsMi4xLDQuOCw0LjgJCWMwLDIuNi0yLjIsNC43LTQuOCw0LjdjLTAuNCwwLTAuOCwwLTEuMS0wLjF2MC45YzAuNCwwLjEsMC43LDAuMSwxLjEsMC4xYzMuMSwwLDUuNy0yLjUsNS43LTUuNlMxMi40LDEsOS4zLDF6Ii8+PHBhdGggZD0iTTkuMyw4LjljLTAuMiwwLTAuNCwwLTAuNS0wLjFMOC41LDguN3YxbDAuMiwwYzAuMiwwLDAuNCwwLjEsMC42LDAuMWMxLjgsMCwzLjMtMS40LDMuMy0zLjJjMC0xLjgtMS41LTMuMi0zLjMtMy4yCQljLTEuOCwwLTMuMywxLjQtMy4zLDMuMmMwLDAuMiwwLDAuNCwwLjEsMC42bDAsMC4yaDFMNy4xLDdjMC0wLjEsMC0wLjMsMC0wLjVjMC0xLjIsMS0yLjMsMi4zLTIuM2MxLjMsMCwyLjMsMSwyLjMsMi4zCQlDMTEuNiw3LjgsMTAuNiw4LjksOS4zLDguOXoiLz48L2c+PC9zdmc+";

package/src/nile-icon/icons/svg/ng-alert-circle.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfMjE1NjBfMzMwNDQpIj48cGF0aCBkPSJNOS45OTk5OSA2LjY2NjVWOS45OTk4NE05Ljk5OTk5IDEzLjMzMzJIMTAuMDA4M00xOC4zMzMzIDkuOTk5ODRDMTguMzMzMyAxNC42MDIyIDE0LjYwMjQgMTguMzMzMiA5Ljk5OTk5IDE4LjMzMzJDNS4zOTc2MiAxOC4zMzMyIDEuNjY2NjYgMTQuNjAyMiAxLjY2NjY2IDkuOTk5ODRDMS42NjY2NiA1LjM5NzQ2IDUuMzk3NjIgMS42NjY1IDkuOTk5OTkgMS42NjY1QzE0LjYwMjQgMS42NjY1IDE4LjMzMzMgNS4zOTc0NiAxOC4zMzMzIDkuOTk5ODRaIiBzdHJva2U9IiMxODFEMjciIHN0cm9rZS13aWR0aD0iMS42NyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDBfMjE1NjBfMzMwNDQiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0id2hpdGUiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=";

package/src/nile-icon/icons/svg/ng-arrow-narrow-right.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMy4zMzMzNCAxMEgxNi42NjY3TTE2LjY2NjcgMTBMMTEuNjY2NyA1TTE2LjY2NjcgMTBMMTEuNjY2NyAxNSIgc3Ryb2tlPSIjMTgxRDI3IiBzdHJva2Utd2lkdGg9IjEuNjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==";

package/src/nile-icon/icons/svg/ng-button-loading-blue-animated.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjIwMXB4IiBoZWlnaHQ9IjIwMXB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzBlODNjYyIgc3Ryb2tlLXdpZHRoPSIxMCIgcj0iMzUiIHN0cm9rZS1kYXNoYXJyYXk9IjE2NC45MzM2MTQzMTM0NjQxNSA1Ni45Nzc4NzE0Mzc4MjEzOCI+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjIuNTY0MTAyNTY0MTAyNTY0cyIgdmFsdWVzPSIwIDUwIDUwOzM2MCA1MCA1MCIga2V5VGltZXM9IjA7MSI+PC9hbmltYXRlVHJhbnNmb3JtPjwvY2lyY2xlPjwhLS0gW2xkaW9dIGdlbmVyYXRlZCBieSBodHRwczovL2xvYWRpbmcuaW8vIC0tPjwvc3ZnPg==";

package/src/nile-icon/icons/svg/ng-button-loading-blue.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ1cmwoI3BhdHRlcm4wKSIvPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuMCIgcGF0dGVybkNvbnRlbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPjx1c2UgeGxpbms6aHJlZj0iI2ltYWdlMF8xMjI1XzQ1OCIgdHJhbnNmb3JtPSJzY2FsZSgwLjAxNDcwNTkpIi8+PC9wYXR0ZXJuPjxpbWFnZSBpZD0iaW1hZ2UwXzEyMjVfNDU4IiB3aWR0aD0iNjgiIGhlaWdodD0iNjgiIHhsaW5rOmhyZWY9ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBRVFBQUFCRUNBWUFBQUE0RTVPeUFBQUFDWEJJV1hNQUFDNGpBQUF1SXdGNHBUOTJBQUFHSVVsRVFWUjRuTzJjVFlnY1JSVEgvK051Y0YybDFpLzgvcnprb0lrYktFTU1hRFI0VldJRUNaNk1uaFNWS0FpaWxHaWdUb0tpSUlvbm94dkVnK0F1TVFvZXhQaUZCQXF5aUNZcW9nbUtCRDBrSmE2N016dlRVdkYxOHJiU00xMzlNYjB6bS81RDB6TTl2ZDJ2ZnYzZXE4L2VSaFJGcUhWS1o5VXNscW9HNHFrRzRxa0c0cWtHNG1sME9XOHV0RGw1ZjZ2azRuTGFFcXVTYWxkb013bGdFNERiQVZ3TFlETEpGdmI1V3dBSEFPeHptMVh5MTc0YkdSdlJMeUJDRzFmd3h3QnNBWENOVitDR2QzcmFiNGNCdkFwZ3B0OXdTZ2NpdExrTmdDS1BBQ3RnRVNCYzd3RFkyUzh3cFFFUjJqZ3ZlQkhBM1hTSUoyd2ZTaWdRL3p4Ky9HMEFUMW9sanhVMGZlbUZ5d0FpdEhtR3dtUENLN1FQd0FMNEhNQXNoY0ZoNzFJdXpLNERzSTd5emZsSk5yUFB4d25LcnNLRmlDOWVGSWpRWmkrQVd4a0FEc0o1eVJFQWV3Qk1XU1ZuTTE3YmdYbUF0b25ZNW9SVFMvT1czRUNFTm1zQnZBNWdiUmNRWHdMWWJaV2NLbW9rM2M5QmVZRzhLRWtPOXVhaVVISUJJUmg3dktjV2IzOERlTm9xdWJ1SVlUM3UvUVNBNTltOXVRcER5UXhFYUxQR2d3RUc0eU1BajFnbGorYzFLTkFHbDJjKzZOS2VLUVFsRXhDaGpZTXdEV0FOaFFWUG1zOWFKZC9JWTBSZUNXM2VvdnppS3plVXJIMFpsODF2Qk9Bb2RtanY5R2pWTVBCL2MvOUJBQThsL0RSSllaVlp3VUNFTms4QjJNZ2dnRDQ3R084V0xsMU9VWldiQkdXSDBPYWVyRmNOQ2htaHpkVUE5bE5vUkxSM01KK3pTcjdaditLR3EwdjR1RngyZlpiUUNmV1Fsd0cwYVFOQitYaFFZT0JVK1BqdG5JbXNvWk1LUkdoekM0QU5MRys0N1RjQWoyZTJ1di9hU2w3QnRZTnFwWEtBdUJZZzdYa1NkYUZpQjR2RkNTOXhIYjVYRW40SzlwS2VPVVJvY3dPQXZTeDNPSUQ3clpMMzVUVzZDZ2x0ZmtsbzBWNFlra3ZTUEdTN1Y4VzZIUExTSU1NZzdVdzR0ajNrRDlPQTNNbVNxUU55MENyNVRWNHJLOVIwUWk1SmFzQ2RwalFnNTdKRTZxQzhQd1F3UUtFeDdSMmVGTm9rRFNjc1VScVFqdmY5ay94bVZxNlpoQnZla1daRVZ5QkNtMTBVSm92a0hkOWJKWDhmRmhwV1NkOURRSU5PUGRYTFExYXp6eWVBbEd0eUpkcm4zV1JkMmsxN0FSbG4rY1BwNEdDWFBWRUh2SU9wUUhwTlZFV3NkbWtNS1JDLzNaRTBxTFJFdllDMHlZT2lMdU9ZdzZCTVk3am9GakpDbXhHV1VEdGVzMzJZZEZyTFZHalQ4K0dtaFV5OEg4cGxSbGJKejdJT2dvVUE2Zlo5UmFvYmtDaWhVWFpHS05HZHJKSWRWc1BFKzlRcWF5V29WM3o5NFVHNTdFd0g4aE9yWmRvMDlUQlVTcXRSc2dMNWtVQzBDTXdsUXB0TFZ6cVVYa0MrWUNObGNaTGRXTnpFYXNSQnVNK2hZTG9Dc1VyK1RJUEpMZVlwVzRZRlNON1dkVnFqNVN1dnBybElhTE1objMzVmlYbkR5VWw0cTJSUU95b055QXlGU3BPZ3VGeHkxNkFEWWZQT3BTWlZGelpIcVFzZGU0bURzMXBvczZuWDN5Mm5oRFpKWlFwdVpZZTA4OThqRVBQTVMrNFYyb3dQSUF6bkVTUCtjcTdRY0VFSUVLdmtkd0MrWnIzZkZxMzlDaHJGcmxoeFY0VG5rRXg5c05DZTRCVEJXR1JnYmhMYWJCNFVFa0tiVlFsclZoclVEUWxXRUJDcjVKKzBZbWVSRW16Y2d0MHF0Rm5mdDFJR2lzWnZSdGpaY2NpMHMxNHJlS3lBUnJFUDBWZmV4OWttdEpFbGxTMnphTDM4MlFtcklEdFp2UU01VmhDOVJtdEw0NFpha3lYWnl0c25RcHN4Z2dFUFJwVDNaWUk4aSs2dWRLdUd5SkFXeXl0Tm1xcjQwQ3E1a01lWUREYTRCM2tPRy9QbG8zcnVZVFd6MUN4Y2VaZGxYZ0hnWVlyYk5xdVdJMXF0L0tsVjhvYzhCZ1hjMnoySU1mcmE4WVk2blMwTGVXR2c0TUxkQ3dEYzczckJiRUo4bmlWZU44czNhNVU4a3RjNDczNWpORmZVOEZZamdIVSsveTBDQTBXWGRwT1IyMmp3S0dJNXBVbWJDNTEvYUU3bmFOWkZObFNWanJPazJXYUY1NzN3VmxIUGlGWFc0ditiQWF5bmhsRThGN3pnYll1MFJPRVloWlg3UGtlWGlJMFlwVzJNOW53WlY4ZWJTWXc5Wk00cTJTcGNDRktacjRjSWVnbmdLbnBpY1Y2SlBTVk93REdvRGd1MXBFSkg3QnovV0VUWG5pdkRLN2o2OFFMUjVhNFZTODM3QmdNUXcyZ3lJSDZCMjU0WEpBR2FJeENaRzEwaDZ1czdkL1NTd01VQVZwR0g4QTBzdkxwNVI3eTErZzBpVm1Ydi90UGkzL01Jem1nWHIrRGhNRytWL0tzUzQ1aVc5WjhoOEhIT3NuTkJYdFgvSGNKVC9XYTNweHFJcHhxSXB4cUlweG9JRjREL0FCbURodjBUcExNQkFBQUFBRWxGVGtTdVFtQ0MiLz48L2RlZnM+PC9zdmc+";

package/src/nile-icon/icons/svg/ng-check-circle-broken.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfMjE2MThfMTA3NCkiPjxwYXRoIGQ9Ik0xOC4zMzMzIDkuMjM3OTRWMTAuMDA0NkMxOC4zMzIzIDExLjgwMTYgMTcuNzUwNCAxMy41NTAyIDE2LjY3NDQgMTQuOTg5NUMxNS41OTg1IDE2LjQyODggMTQuMDg2MSAxNy40ODE3IDEyLjM2MjggMTcuOTkxMkMxMC42Mzk1IDE4LjUwMDcgOC43OTc3MSAxOC40Mzk1IDcuMTEyMDUgMTcuODE2OEM1LjQyNjM5IDE3LjE5NCAzLjk4NzIgMTYuMDQzIDMuMDA5MTIgMTQuNTM1NUMyLjAzMTA1IDEzLjAyOCAxLjU2NjQ4IDExLjI0NDcgMS42ODQ3MiA5LjQ1MTU0QzEuODAyOTYgNy42NTg0MSAyLjQ5NzY2IDUuOTUxNTUgMy42NjUyMiA0LjU4NTVDNC44MzI3OCAzLjIxOTQ2IDYuNDEwNjQgMi4yNjc0MyA4LjE2MzQ4IDEuODcxNEM5LjkxNjMyIDEuNDc1MzcgMTEuNzUwMiAxLjY1NjU1IDEzLjM5MTcgMi4zODc5NE0xOC4zMzMzIDMuMzMzMTdMOS45OTk5OSAxMS42NzQ4TDcuNDk5OTkgOS4xNzQ4NCIgc3Ryb2tlPSIjMTgxRDI3IiBzdHJva2Utd2lkdGg9IjEuNjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwXzIxNjE4XzEwNzQiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0id2hpdGUiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=";

package/src/nile-icon/icons/svg/ng-check.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTYuNjY2NyA1TDcuNDk5OTkgMTQuMTY2N0wzLjMzMzMzIDEwIiBzdHJva2U9IiMxODFEMjciIHN0cm9rZS13aWR0aD0iMS42NyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/ng-file-06.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTEuNjY2NyAxLjg5MTExVjUuMzMzMjNDMTEuNjY2NyA1Ljc5OTk0IDExLjY2NjcgNi4wMzMzIDExLjc1NzUgNi4yMTE1NkMxMS44Mzc0IDYuMzY4MzYgMTEuOTY0OSA2LjQ5NTg0IDEyLjEyMTcgNi41NzU3NEMxMi4yOTk5IDYuNjY2NTYgMTIuNTMzMyA2LjY2NjU2IDEzIDYuNjY2NTZIMTYuNDQyMU0xMy4zMzMzIDEwLjgzMzJINi42NjY2OE0xMy4zMzMzIDE0LjE2NjVINi42NjY2OE04LjMzMzM0IDcuNDk5ODRINi42NjY2OE0xMS42NjY3IDEuNjY2NUg3LjMzMzM0QzUuOTMzMjEgMS42NjY1IDUuMjMzMTUgMS42NjY1IDQuNjk4MzcgMS45Mzg5OUM0LjIyNzk2IDIuMTc4NjcgMy44NDU1MSAyLjU2MTEyIDMuNjA1ODMgMy4wMzE1M0MzLjMzMzM0IDMuNTY2MzEgMy4zMzMzNCA0LjI2NjM3IDMuMzMzMzQgNS42NjY1VjE0LjMzMzJDMy4zMzMzNCAxNS43MzMzIDMuMzMzMzQgMTYuNDMzNCAzLjYwNTgzIDE2Ljk2ODFDMy44NDU1MSAxNy40Mzg2IDQuMjI3OTYgMTcuODIxIDQuNjk4MzcgMTguMDYwN0M1LjIzMzE1IDE4LjMzMzIgNS45MzMyMSAxOC4zMzMyIDcuMzMzMzQgMTguMzMzMkgxMi42NjY3QzE0LjA2NjggMTguMzMzMiAxNC43NjY5IDE4LjMzMzIgMTUuMzAxNyAxOC4wNjA3QzE1Ljc3MjEgMTcuODIxIDE2LjE1NDUgMTcuNDM4NiAxNi4zOTQyIDE2Ljk2ODFDMTYuNjY2NyAxNi40MzM0IDE2LjY2NjcgMTUuNzMzMyAxNi42NjY3IDE0LjMzMzJWNi42NjY1TDExLjY2NjcgMS42NjY1WiIgc3Ryb2tlPSIjMTgxRDI3IiBzdHJva2Utd2lkdGg9IjEuNjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==";

package/src/nile-icon/icons/svg/ng-image-03.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNMy41NjAwNyAxNy4yNzMzTDkuMDU3MTggMTEuNzc2MUM5LjM4NzIgMTEuNDQ2MSA5LjU1MjIgMTEuMjgxMSA5Ljc0MjQ4IDExLjIxOTNDOS45MDk4NSAxMS4xNjQ5IDEwLjA5MDEgMTEuMTY0OSAxMC4yNTc1IDExLjIxOTNDMTAuNDQ3OCAxMS4yODExIDEwLjYxMjggMTEuNDQ2MSAxMC45NDI4IDExLjc3NjFMMTYuNDAzMyAxNy4yMzY2TTExLjY2NjcgMTIuNUwxNC4wNTcyIDEwLjEwOTVDMTQuMzg3MiA5Ljc3OTQ2IDE0LjU1MjIgOS42MTQ0NSAxNC43NDI1IDkuNTUyNjNDMTQuOTA5OCA5LjQ5ODI1IDE1LjA5MDEgOS40OTgyNSAxNS4yNTc1IDkuNTUyNjNDMTUuNDQ3OCA5LjYxNDQ1IDE1LjYxMjggOS43Nzk0NiAxNS45NDI4IDEwLjEwOTVMMTguMzMzMyAxMi41TTguMzMzMzIgNy41QzguMzMzMzIgOC40MjA0NyA3LjU4NzEzIDkuMTY2NjcgNi42NjY2NiA5LjE2NjY3QzUuNzQ2MTggOS4xNjY2NyA0Ljk5OTk5IDguNDIwNDcgNC45OTk5OSA3LjVDNC45OTk5OSA2LjU3OTUzIDUuNzQ2MTggNS44MzMzMyA2LjY2NjY2IDUuODMzMzNDNy41ODcxMyA1LjgzMzMzIDguMzMzMzIgNi41Nzk1MyA4LjMzMzMyIDcuNVpNNS42NjY2NiAxNy41SDE0LjMzMzNDMTUuNzMzNSAxNy41IDE2LjQzMzUgMTcuNSAxNi45NjgzIDE3LjIyNzVDMTcuNDM4NyAxNi45ODc4IDE3LjgyMTIgMTYuNjA1NCAxOC4wNjA4IDE2LjEzNUMxOC4zMzMzIDE1LjYwMDIgMTguMzMzMyAxNC45MDAxIDE4LjMzMzMgMTMuNVY2LjVDMTguMzMzMyA1LjA5OTg3IDE4LjMzMzMgNC4zOTk4IDE4LjA2MDggMy44NjUwMkMxNy44MjEyIDMuMzk0NjIgMTcuNDM4NyAzLjAxMjE3IDE2Ljk2ODMgMi43NzI0OEMxNi40MzM1IDIuNSAxNS43MzM1IDIuNSAxNC4zMzMzIDIuNUg1LjY2NjY2QzQuMjY2NTMgMi41IDMuNTY2NDYgMi41IDMuMDMxNjggMi43NzI0OEMyLjU2MTI4IDMuMDEyMTcgMi4xNzg4MiAzLjM5NDYyIDEuOTM5MTQgMy44NjUwMkMxLjY2NjY2IDQuMzk5OCAxLjY2NjY2IDUuMDk5ODcgMS42NjY2NiA2LjVWMTMuNUMxLjY2NjY2IDE0LjkwMDEgMS42NjY2NiAxNS42MDAyIDEuOTM5MTQgMTYuMTM1QzIuMTc4ODIgMTYuNjA1NCAyLjU2MTI4IDE2Ljk4NzggMy4wMzE2OCAxNy4yMjc1QzMuNTY2NDYgMTcuNSA0LjI2NjUzIDE3LjUgNS42NjY2NiAxNy41WiIgc3Ryb2tlPSIjMTgxRDI3IiBzdHJva2Utd2lkdGg9IjEuNjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==";

package/src/nile-icon/icons/svg/ng-minus.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj48cGF0aCBkPSJNNC4xNjY2NyAxMEgxNS44MzMzIiBzdHJva2U9IiMxODFEMjciIHN0cm9rZS13aWR0aD0iMS42NyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/ng-x-circle.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfMjE1NjBfMzMwNDcpIj48cGF0aCBkPSJNMTIuNSA3LjQ5OTg0TDcuNDk5OTkgMTIuNDk5OE03LjQ5OTk5IDcuNDk5ODRMMTIuNSAxMi40OTk4TTE4LjMzMzMgOS45OTk4NEMxOC4zMzMzIDE0LjYwMjIgMTQuNjAyNCAxOC4zMzMyIDkuOTk5OTkgMTguMzMzMkM1LjM5NzYyIDE4LjMzMzIgMS42NjY2NiAxNC42MDIyIDEuNjY2NjYgOS45OTk4NEMxLjY2NjY2IDUuMzk3NDYgNS4zOTc2MiAxLjY2NjUgOS45OTk5OSAxLjY2NjVDMTQuNjAyNCAxLjY2NjUgMTguMzMzMyA1LjM5NzQ2IDE4LjMzMzMgOS45OTk4NFoiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS42NyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDBfMjE1NjBfMzMwNDciPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0id2hpdGUiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=";

package/src/nile-icon/index.ts

@@ -142,6 +142,13 @@ export class NileIcon extends LitElement {
   ): Promise<void> {
 
     if (changedProperties.has('size')) {
+      const resolved = this.resolveCssVarExpression(`${this.size}`);
+      if (resolved) {
+        const numeric = parseInt(resolved.replace(/px$/, '').trim(), 10);
+        if (!isNaN(numeric)) {
+          this.size = numeric;            
+        }
+      }
       this.style.setProperty('--nile-svg-height', `${this.size}px`);
       this.style.setProperty('--nile-svg-width', `${this.size}px`);
     }
@@ -149,6 +156,12 @@ export class NileIcon extends LitElement {
     if (changedProperties.has('color')) {
       this.style.setProperty('--nile-svg-fill', `${this.color}`);
     }
+
+  if (changedProperties.has('method')) {
+    const resolved = this.resolveCssVarExpression(this.method);
+    if (resolved) this.method = resolved.trim();
+  }
+
     if (changedProperties.has('name') || changedProperties.has('customSvgPath')) {
       const raw = this.name?.replace(/-/g, '') ?? '';
       const iconName = aliasMap[raw] || raw;
@@ -158,11 +171,36 @@ export class NileIcon extends LitElement {
         this._svg = await this.fetchSvg(this.customSvgPath);
       } else {
         // throw new Error(`No icon named "${this.name}"`);
+        const a = this.resolveCssVarExpression(this.name!)
+        this.name = a!;
       }
     }
     this.addAttributesToSvg();
   }
 
+  resolveCssVarExpression(expression: string): string | null {
+    const regex = /var\((--[^,\s)]+)(?:,\s*(.+))?\)/;
+  
+    let match = expression.trim();
+    let attempts = 0;
+  
+    while (match.startsWith("var(") && attempts++ < 10) {
+      const parts = match.match(regex);
+      if (!parts) break;
+  
+      const [, varName, fallback] = parts;
+      const value = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+      if (value) {
+        return value;
+      } else if (fallback) {
+        match = fallback.trim();
+      } else {
+        return null;
+      }
+    }
+    return match || null;
+  }
+
   private addAttributesToSvg(){
     const svg = this.renderRoot.querySelector('#svg')
     const attrs = svg?.attributes

package/src/nile-icon-button/nile-icon-button.ts

@@ -122,16 +122,6 @@ export class NileIconButton extends NileElement {
     this.ishovered = false;
   }
 
-  private getTokenValueResolved(): any {
-    const thisValue = this; 
-  
-    const value = Number(getComputedStyle(thisValue).getPropertyValue('--nile-width-14px').trim().split('px')[0]);
-    if (!value) {
-      return Number(getComputedStyle(thisValue).getPropertyValue('--ng-height-12px').trim().split('px')[0]);
-    }
-    return value;
-  }
-
   render(): TemplateResult {
     const isLink = this.href ? true : false;
     const tag = isLink ? literal`a` : literal`button`;
@@ -171,7 +161,8 @@ export class NileIconButton extends NileElement {
             src=${ifDefined(this.src)}
             .color=${this.color}
             aria-hidden="true"
-            size="${this.getTokenValueResolved()}"
+            size="var(--nile-icon-size-14, var(--ng-icon-size-12))"
+            method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
           ></nile-icon>
         </a>
       `;
@@ -211,7 +202,8 @@ export class NileIconButton extends NileElement {
             src=${ifDefined(this.src)}
             .color=${this.color}
             aria-hidden="true"
-            size="${this.getTokenValueResolved()}"
+            size="var(--nile-icon-size-14, var(--ng-icon-size-12))"
+            method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
           ></nile-icon>
         </button>
       `;

package/src/nile-input/nile-input.ts

@@ -627,7 +627,7 @@ export class NileInput extends NileElement implements NileFormControl {
                       tabindex="-1"
                     >
                       <slot name="clear-icon">
-                        <nile-icon name="error" library="system"></nile-icon>
+                        <nile-icon name="var(--nile-icon-error, var(--ng-icon-x-circle))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" library="system"></nile-icon>
                       </slot>
                     </button>
                   `
@@ -650,7 +650,8 @@ export class NileInput extends NileElement implements NileFormControl {
                         ? html`
                             <slot name="show-password-icon">
                               <nile-icon
-                                name="eye"
+                                name="var(--nile-icon-eye, var(--ng-icon-eye))"
+                                method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
                                 library="system"
                               ></nile-icon>
                             </slot>
@@ -658,7 +659,8 @@ export class NileInput extends NileElement implements NileFormControl {
                         : html`
                             <slot name="hide-password-icon">
                               <nile-icon
-                                name="eye"
+                                name="var(--nile-icon-eye, var(--ng-icon-eye))"
+                                method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
                                 library="system"
                               ></nile-icon>
                             </slot>

package/src/nile-list-item/nile-list-item.ts

@@ -67,6 +67,7 @@ export class NileListItem extends NileElement {
             <nile-icon
               name="${this.iconName}"
               size="${this.iconSize}"
+              method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
             ></nile-icon>
           </slot>`
         : ``}

package/src/nile-menu/nile-menu.ts

@@ -201,7 +201,7 @@ export class NileMenu extends NileElement {
               part="menu__input"
               clearable
             >
-              <nile-icon name="search" slot="suffix"> </nile-icon>
+              <nile-icon name="var(--nile-icon-search, var(--ng-icon-search-lg))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" slot="suffix"> </nile-icon>
             </nile-input>
           </div>`
         : html``}

package/src/nile-menu-item/nile-menu-item.ts

@@ -159,7 +159,8 @@ export class NileMenuItem extends NileElement {
           ? html`
               <span part="checked-icon" class="menu-item__check">
                 <nile-icon
-                  name="tick"
+                  name="var(--nile-icon-tick, var(--ng-icon-check))"
+                  method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
                   library="system"
                   aria-hidden="true"
                 ></nile-icon>
@@ -180,7 +181,8 @@ export class NileMenuItem extends NileElement {
         ${this.hasSubMenu
           ? html` <span part="submenu-icon" class="menu-item__chevron">
               <nile-icon
-                name="arrowright"
+                name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))"
+                method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
                 library="system"
                 aria-hidden="true"
               ></nile-icon>

package/src/nile-pagination/nile-pagination.ts

@@ -132,8 +132,9 @@ private renderCompactRangeText(): TemplateResult {
           >
             ${this.pageSize}
             <nile-icon
-              name="chevrondown"
+                 name="var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))"
               size="14"
+              method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
               class="chevron"
             ></nile-icon>
           </nile-button>
@@ -174,8 +175,9 @@ private renderCompactRangeText(): TemplateResult {
         >
           ${this.pageSize}
           <nile-icon
-            name="chevrondown"
+               name="var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))"
             size="14"
+            method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
             class="chevron"
           ></nile-icon>
         </nile-button>
@@ -206,7 +208,7 @@ private renderCompactRangeText(): TemplateResult {
           ?disabled=${this.currentPage === 1 || this.disabled}
           @click=${() => this.goToPage(this.currentPage - 1)}
         >
-          <nile-icon name="arrowleft" size="14"></nile-icon>
+          <nile-icon name="var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="14"></nile-icon>
         </nile-button>
       </li>
     `;
@@ -220,7 +222,7 @@ private renderCompactRangeText(): TemplateResult {
           ?disabled=${this.currentPage === this.totalPages || this.disabled}
           @click=${() => this.goToPage(this.currentPage + 1)}
         >
-          <nile-icon name="arrowright" size="14"></nile-icon>
+          <nile-icon name="var(--nile-icon-arrow-right, var(--ng-chevron-right))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="14"></nile-icon>
         </nile-button>
       </li>
     `;
@@ -295,8 +297,9 @@ private renderCompactRangeText(): TemplateResult {
                 >
                   ${this.currentPage}
                   <nile-icon
-                    name="chevrondown"
+                    name="var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))"
                     size="14"
+                    method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
                     class="chevron"
                   ></nile-icon>
                 </nile-button>

package/src/nile-section-message/nile-section-message.ts

@@ -34,10 +34,10 @@ export class NileSectionMessage extends NileElement {
   @property() variant: 'primary' | 'success' | 'warning' | 'error' = 'primary';
 
   iconMap = {
-    primary: 'info2',
-    success: 'done-02',
-    warning: 'warning',
-    error: 'warning',
+    primary: 'var(--nile-icon-info, var(--ng-icon-info-circle))',
+    success: 'var(--nile-icon-done-02, var(--ng-icon-check-circle-broken))',
+    warning: 'var(--nile-icon-warning, var(--ng-icon-alert-circle))',
+    error: 'var(--nile-icon-warning, var(--ng-icon-alert-circle))',
   };
 
   connectedCallback() {
@@ -82,9 +82,9 @@ export class NileSectionMessage extends NileElement {
         >
           <slot name="icon">
             <nile-icon-button
-              name="${this.iconMap[this.variant]}"
+              name="${this.iconMap[this.variant]}"  
               size="${this.iconSize}"
-              color="var(--nile-colors-white-base)"
+              color="var(--nile-colors-white-base, white)"
             >
             </nile-icon-button>
           </slot>

package/src/nile-select/nile-select.ts

@@ -1241,7 +1241,7 @@ export class NileSelect extends NileElement implements NileFormControl{
                       tabindex="-1"
                     >
                       <slot name="clear-icon">
-                        <nile-icon name="close" library="system"></nile-icon>
+                        <nile-icon name="var(--nile-icon-close, var(--ng-icon-x-close))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" library="system"></nile-icon>
                       </slot>
                     </button>
                   `
@@ -1260,7 +1260,7 @@ export class NileSelect extends NileElement implements NileFormControl{
                 part="expand-icon"
                 class="select__expand-icon"
               >
-                <nile-icon library="system" name="arrowdown"></nile-icon>
+                <nile-icon library="system" name="var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
               </slot>
             </div>
 
@@ -1289,7 +1289,7 @@ export class NileSelect extends NileElement implements NileFormControl{
                       @nile-focus=${this.handleSearchFocus}
                       @nile-change="${this.onInputChange}"
                     >
-                      <nile-icon name="search" slot="suffix"> </nile-icon>
+                      <nile-icon name="var(--nile-icon-search, var(--ng-icon-search-lg))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" slot="suffix"> </nile-icon>
                     </nile-input>
                   </div>`
                 : ``}
@@ -1298,7 +1298,8 @@ export class NileSelect extends NileElement implements NileFormControl{
                     <span class="select__loader">
                       <nile-icon
                         class="select__loader--icon"
-                        name="button-loading-blue"
+                        name="var(--nile-icon-button-loading-blue, var(--ng-icon-button-loading-blue))"
+                        method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
                       ></nile-icon>
                     </span>
                   `

package/src/nile-sidebar-menu-items/nile-sidebar-menu-items.ts

@@ -57,6 +57,7 @@ export class NileSidebarMenuItems extends NileElement {
               name="${this.iconValue}"
               aria-label="${this.iconValue}"
               size="24"
+              method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
             ></nile-icon>`
           : ``}
         <slot

package/src/nile-slide-toggle/nile-slide-toggle.css.ts

@@ -79,7 +79,7 @@ export default css`
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: var(--nile-slide-toggle-color-background-inactive, var(--ng-colors-bg-tertiary));
+    background-color: var(--nile-slide-toggle-color-background-inactive, var(--ng-colors-bg-quaternary));
     transition: 0.4s;
     border-radius: var(--nile-radius-3xl, var(--ng-radius-full));
   }
@@ -92,6 +92,12 @@ export default css`
     box-shadow: var(--nile-box-shadow-4, var(--ng-focus-ring));
   }
 
+  .nile-slide-toggle__slider:hover {
+    &:not(.nile-slide--disabled) {
+      background-color: var(--nile-slide-toggle-color-background-inactive, var(--ng-colors-bg-quaternary-alt));
+    }
+  }
+
   .nile-slide-toggle__slider:before {
     position: absolute;
     content: '';

package/src/nile-switcher/nile-switcher.ts

@@ -309,7 +309,8 @@ export class NileSwitcher extends NileElement {
       <nile-icon
         class="pointer-cursor switcher-object-mapper-icon"
         slot="suffix"
-        name="expand-2"
+        name="var(--nile-icon-expand-2, var(--ng-icon-expand-06))"
+        method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
         color="var(--nile-colors-primary-600)"
         size="16"
       >
@@ -403,6 +404,7 @@ export class NileSwitcher extends NileElement {
                 'pointer-cursor-not-allowed': index === this.current,
               })}
               .name=${input.icon}
+              method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
               color="#000000"
               @click=${() => this.toggleField(input, index)}
             ></nile-icon>

package/src/nile-tab/nile-tab.ts

@@ -111,7 +111,7 @@ export class NileTab extends NileElement {
               <nile-icon-button
                 part="close-button"
                 exportparts="base:close-button__base"
-                name="close"
+                name="var(--nile-icon-close, var(--ng-icon-x-close))"
                 library="system"
                 label="close"
                 class="tab__close-button"

package/src/nile-tab-group/nile-tab-group.ts

@@ -61,7 +61,7 @@ export class NileTabGroup extends NileElement {
   @query('.tab-group__nav') nav: HTMLElement;
   @query('.tab-group__indicator') indicator: HTMLElement;
 
-  @state() hasScrollControls = false;
+  @state() hasScrollControls = true;
 
   /** The placement of the tabs. */
   @property() placement: 'top' | 'bottom' | 'start' | 'end' = 'top';
@@ -196,7 +196,7 @@ export class NileTabGroup extends NileElement {
                   part="scroll-button scroll-button--start"
                   exportparts="base:scroll-button__base"
                   class="tab-group__scroll-button tab-group__scroll-button--start"
-                  name='arrowright'
+                  name='var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))'
                   library="system"
                   label="scrollToStart"
                   @click=${this.handleScrollToEnd}
@@ -224,7 +224,7 @@ export class NileTabGroup extends NileElement {
                   part="scroll-button scroll-button--end"
                   exportparts="base:scroll-button__base"
                   class="tab-group__scroll-button tab-group__scroll-button--end"
-                  name='arrowleft'
+                  name='var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))'
                   library="system"
                   label="scrollToEnd"
                   @click=${this.handleScrollToStart}

package/src/nile-table-header-item/nile-table-header-item.css.ts

@@ -65,11 +65,17 @@ export const styles = css`
   }
 
   .hover__arrow {
-    opacity: 0;
+    opacity: 0.6;
+    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));
   }
 
   .headers:hover .hover__arrow {
-    opacity: 0.3;
+    /* opacity: 0.3; */
+    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));
+  }
+
+  .stroke-width {
+    --nile-svg-stroke-width: var(--nile-icon-stroke-width-1-3, var(--ng-icon-stroke-width-2-5));
   }
 
   ${resizableHeaderStyles}

package/src/nile-table-header-item/nile-table-header-item.ts

@@ -79,32 +79,37 @@ export class NileTableHeaderItem extends NileElement {
           <slot> </slot>
           ${this.havesort && this.sorting_ct % 3 === 0
             ? html`<nile-icon
-                name="sortdown"
-                size="16"
+                name="var(--nile-icon-sort, var(--ng-icon-chevron-selector-vertical))"
+                method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+                size="var(--nile-icon-size-16, var(--ng-icon-size-12))"
                 @click=${this.handleSort}
                 class="hover__arrow"
               ></nile-icon>`
             : null}
           ${this.havesort && this.sorting_ct % 3 === 1
             ? html`<nile-icon
-                name="sortdown"
-                size="16"
+                name="var(--nile-icon-sort-down, var(--ng-icon-arrow-down))"
+                method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+                size="var(--nile-icon-size-16, var(--ng-icon-size-12))"
+                class="stroke-width"
                 @click=${this.handleSort}
               ></nile-icon>`
             : null}
           ${this.havesort && this.sorting_ct % 3 === 2
             ? html`<nile-icon
-                name="sortup"
-                size="16"
+                name="var(--nile-icon-sort-up, var(--ng-icon-arrow-up))"
+                method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+                size="var(--nile-icon-size-16, var(--ng-icon-size-12))"
+                class="stroke-width"
                 @click=${this.handleSort}
               ></nile-icon>`
             : null}
           ${this.iconName
-            ? html` <nile-icon name="${this.iconName}" size="16"></nile-icon>`
+            ? html` <nile-icon name="${this.iconName}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="16"></nile-icon>`
             : html``}
           ${this.havefilter
             ? html` <nile-popover title="Filter" placement="bottom">
-                <nile-icon name="filter" size="16" slot="anchor"></nile-icon>
+                <nile-icon name="var(--nile-icon-filter, var(--ng-icon-filter-lines))" size="16" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" slot="anchor"></nile-icon>
                 <nile-input
                   placeholder="Search"
                   @nile-input=${this.handleSearch}

package/src/nile-tag/nile-tag.ts

@@ -130,7 +130,7 @@ export class NileTag extends NileElement {
               <nile-icon-button
                 part="remove-button"
                 exportparts="base:remove-button__base"
-                name="close"
+                name="var(--nile-icon-close, var(--ng-icon-x-close))"
                 library="system"
                 label="remove"
                 class="tag__remove cross_icon"