Add icon styling and mode

app/assets/css/bootstrap-override.css

@@ -485,95 +485,6 @@ input:checked + .slider:before {
   background-color: var(--ui-success-7);
 }
 
-/* Feather Icon Variants */
-
-.feather {
-  height: 1em;
-  width: 1em;
-  color: inherit;
-}
-
-.icon-xs {
-  height: 10px;
-  width: 10px;
-}
-
-.icon-sm {
-  height: 14px;
-  width: 14px;
-}
-
-.icon-md {
-  height: 16px;
-  width: 16px;
-}
-
-.icon-lg {
-  height: 22px;
-  width: 22px;
-}
-
-.icon-xl {
-  height: 26px;
-  width: 26px;
-}
-
-.icon-primary {
-  color: var(--ui-blue-8);
-}
-
-.icon-white {
-  color: var(--white-color);
-}
-
-.icon-dark {
-  color: var(--ui-black);
-}
-
-.icon-secondary {
-  color: var(--ui-gray-8);
-}
-
-.icon-warning {
-  color: var(--ui-warning-8);
-}
-
-.icon-danger {
-  color: var(--ui-error-8);
-}
-
-.icon-success {
-  color: var(--ui-success-6);
-}
-
-.icon-nested-gray {
-  width: 18px;
-  height: 18px;
-  height: 30px;
-  width: 30px;
-  padding: 5px;
-  text-align: center;
-  border-radius: 50%;
-  background-color: var(--ui-gray-4);
-  margin-right: 5px;
-}
-
-.icon-nested-blue {
-  width: 18px;
-  height: 18px;
-  height: 30px;
-  width: 30px;
-  padding: 5px;
-  text-align: center;
-  border-radius: 50%;
-  background-color: var(--ui-blue-3);
-  margin-right: 5px;
-}
-
-.icon-container {
-  display: flex;
-  align-items: center;
-}
 /* Required Label with asterisk */
 
 .required:after {

app/assets/css/icon.css

@@ -0,0 +1,135 @@
+/* Feather Icon Variants */
+
+.feather {
+  display: block;
+  color: var(--text-body-color);
+  height: 18px;
+  width: 18px;
+}
+
+.icon-xs {
+  height: 10px;
+  width: 10px;
+}
+
+.icon-sm {
+  height: 14px;
+  width: 14px;
+}
+
+.icon-md {
+  height: 16px;
+  width: 16px;
+}
+
+.icon-lg {
+  height: 22px;
+  width: 22px;
+}
+
+.icon-xl {
+  height: 26px;
+  width: 26px;
+}
+
+.icon {
+  color: currentColor;
+  margin: 0;
+}
+
+.icon.icon-alt {
+  fill: var(--black-color);
+  stroke: var(--white-color);
+}
+
+.icon-primary {
+  color: var(--ui-blue-8);
+}
+
+.icon.icon-primary-alt {
+  fill: var(--ui-blue-8);
+  stroke: var(--white-color);
+}
+
+.icon-white {
+  color: var(--white-color);
+}
+
+.icon.icon-white-alt {
+  fill: var(--black-color);
+  stroke: var(--white-color);
+}
+
+.icon-dark {
+  color: var(--ui-black);
+}
+
+.icon.icon-dark-alt {
+  fill: var(--white-color);
+  stroke: var(--black-color);
+}
+
+.icon-secondary {
+  color: var(--ui-gray-8);
+}
+
+.icon.icon-secondary-alt {
+  fill: var(--ui-gray-8);
+  stroke: var(--black-color);
+}
+
+.icon-warning {
+  color: var(--ui-warning-8);
+}
+
+.icon.icon-warning-alt {
+  fill: var(--ui-warning-8);
+  stroke: var(--white-color);
+}
+
+.icon-danger {
+  color: var(--ui-error-8);
+}
+
+.icon.icon-danger-alt {
+  fill: var(--ui-error-8);
+  stroke: var(--white-color);
+}
+
+.icon-success {
+  color: var(--ui-success-6);
+}
+
+.icon.icon-success-alt {
+  fill: var(--ui-success-8);
+  stroke: var(--white-color);
+}
+
+.icon-nested-gray {
+  width: 18px;
+  height: 18px;
+  height: 30px;
+  width: 30px;
+  padding: 5px;
+  text-align: center;
+  border-radius: 50%;
+  background-color: var(--ui-gray-4);
+  margin-right: 5px;
+}
+
+.icon-nested-blue {
+  width: 18px;
+  height: 18px;
+  height: 30px;
+  width: 30px;
+  padding: 5px;
+  text-align: center;
+  border-radius: 50%;
+  background-color: var(--ui-blue-3);
+  margin-right: 5px;
+}
+
+.icon-container {
+  display: flex;
+  align-items: center;
+}

app/assets/css/index.js

@@ -24,3 +24,4 @@ import './theme.css';
 import './vendor-override.css';
 import '../fonts/nomad-icon.css';
 import './bootstrap-override.css';
+import './icon.css';

app/portainer/react/components/index.ts

@@ -34,5 +34,5 @@ export const componentsModule = angular
     'pageHeader',
     r2a(PageHeader, ['title', 'breadcrumbs', 'loading', 'onReload', 'reload'])
   )
-  .component('prIcon', r2a(Icon, ['className', 'feather', 'icon']))
+  .component('prIcon', r2a(Icon, ['className', 'feather', 'icon', 'mode']))
   .component('reactQueryDevTools', r2a(ReactQueryDevtoolsWrapper, [])).name;

app/react/components/Icon.tsx

@@ -12,9 +12,21 @@ interface Props {
   icon: ReactNode | ComponentType<unknown>;
   feather?: boolean;
   className?: string;
+  mode?:
+    | 'alt'
+    | 'primary'
+    | 'primary-alt'
+    | 'secondary'
+    | 'secondary-alt'
+    | 'warning'
+    | 'warning-alt'
+    | 'danger'
+    | 'danger-alt'
+    | 'success'
+    | 'success-alt';
 }
 
-export function Icon({ icon, feather, className }: Props) {
+export function Icon({ icon, feather, className, mode }: Props) {
   useEffect(() => {
     if (feather) {
       featherIcons.replace();
@@ -31,11 +43,13 @@ export function Icon({ icon, feather, className }: Props) {
     );
   }
 
+  const classes = clsx(className, 'icon', { [`icon-${mode}`]: mode });
+
   if (feather) {
     return (
       <i
         data-feather={icon}
-        className={className}
+        className={classes}
         aria-hidden="true"
         role="img"
       />
@@ -43,6 +57,6 @@ export function Icon({ icon, feather, className }: Props) {
   }
 
   return (
-    <i className={clsx('fa', icon, className)} aria-hidden="true" role="img" />
+    <i className={clsx('fa', icon, classes)} aria-hidden="true" role="img" />
   );
 }