diff --git a/ui/packages/consul-ui/app/components/consul/auth-method/type/index.hbs b/ui/packages/consul-ui/app/components/consul/auth-method/type/index.hbs
index 6aadacc3ca..dc958b68a0 100644
--- a/ui/packages/consul-ui/app/components/consul/auth-method/type/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/auth-method/type/index.hbs
@@ -1,3 +1,9 @@
-
- {{t (concat "common.brand." @item.Type)}}
-
+{{#let (icon-mapping @item.Type) as |flightIcon|}}
+ {{log flightIcon}}
+
+ {{#if flightIcon}}
+
+ {{/if}}
+ {{t (concat "common.brand." @item.Type)}}
+
+{{/let}}
diff --git a/ui/packages/consul-ui/app/components/consul/external-source/index.hbs b/ui/packages/consul-ui/app/components/consul/external-source/index.hbs
index a910e69ee6..86742d4314 100644
--- a/ui/packages/consul-ui/app/components/consul/external-source/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/external-source/index.hbs
@@ -8,7 +8,7 @@
class="consul-external-source"
...attributes
>
-
+
Registered via {{t (concat "common.brand." externalSource)}}
@@ -36,7 +36,7 @@
class="consul-external-source"
...attributes
>
-
+
{{#if @label}}
{{@label}}
{{else}}
diff --git a/ui/packages/consul-ui/app/components/consul/external-source/index.scss b/ui/packages/consul-ui/app/components/consul/external-source/index.scss
index 9b992c9413..21232a860e 100644
--- a/ui/packages/consul-ui/app/components/consul/external-source/index.scss
+++ b/ui/packages/consul-ui/app/components/consul/external-source/index.scss
@@ -29,9 +29,9 @@
// .consul-external-source.leader::before {
// @extend %with-star-outline-mask, %as-pseudo;
// }
-// .consul-external-source.jwt::before {
-// @extend %with-logo-jwt-color-icon, %as-pseudo;
-// }
+.consul-external-source.jwt::before {
+ @extend %with-logo-jwt-color-icon, %as-pseudo;
+}
.consul-external-source.oidc::before {
@extend %with-logo-oidc-color-icon, %as-pseudo;
}
diff --git a/ui/packages/consul-ui/app/components/pill/index.scss b/ui/packages/consul-ui/app/components/pill/index.scss
index 6e2a82faf7..9beab83163 100644
--- a/ui/packages/consul-ui/app/components/pill/index.scss
+++ b/ui/packages/consul-ui/app/components/pill/index.scss
@@ -33,7 +33,7 @@ span.policy-service-identity::before {
// %pill.kubernetes::before {
// @extend %with-logo-kubernetes-color-icon, %as-pseudo;
// }
-%pill.aws-iam::before {
- --icon-name: icon-aws-color;
- content: '';
-}
+// %pill.aws-iam::before {
+// --icon-name: icon-aws-color;
+// content: '';
+// }
diff --git a/ui/packages/consul-ui/app/helpers/external-source-icon-map.js b/ui/packages/consul-ui/app/helpers/external-source-icon-map.js
deleted file mode 100644
index 5a657b98d8..0000000000
--- a/ui/packages/consul-ui/app/helpers/external-source-icon-map.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { helper } from '@ember/component/helper';
-
-const EXTERNAL_SOURCE_ICON_MAP = {
- kubernetes: 'kubernetes-color',
- terraform: 'terraform-color',
- nomad: 'nomad-color',
- consul: 'consul-color',
- 'consul-api-gateway': 'consul-color',
- vault: 'vault',
- jwt: 'jwt-color',
- aws: 'aws-color',
- lambda: 'aws-lambda-color',
-};
-
-function externalSourceIconMap([icon]) {
- return EXTERNAL_SOURCE_ICON_MAP[icon];
-}
-
-export default helper(externalSourceIconMap);
diff --git a/ui/packages/consul-ui/app/helpers/icon-mapping.js b/ui/packages/consul-ui/app/helpers/icon-mapping.js
new file mode 100644
index 0000000000..9f561836e5
--- /dev/null
+++ b/ui/packages/consul-ui/app/helpers/icon-mapping.js
@@ -0,0 +1,28 @@
+import { helper } from '@ember/component/helper';
+
+const ICON_MAPPING = {
+ kubernetes: 'kubernetes-color',
+ terraform: 'terraform-color',
+ nomad: 'nomad-color',
+ consul: 'consul-color',
+ 'consul-api-gateway': 'consul-color',
+ vault: 'vault',
+ aws: 'aws-color',
+ 'aws-iam': 'aws-color',
+ lambda: 'aws-lambda-color',
+};
+
+/**
+ * Takes a icon name, usually an external-source/auth-method-type, and maps it to a flight-icon name or returns undefined
+ * if the icon is not currently mapped to a flight-icon name. This is particularly useful when dealing with converting icons to
+ * use the `` component directly instead of our own css. If the icon is not available with `` you can leave
+ * it out of the mapping and handle it in the undefined case.
+ *
+ * @param {string} icon
+ * @returns {string|undefined}
+ */
+function iconMapping([icon]) {
+ return ICON_MAPPING[icon];
+}
+
+export default helper(iconMapping);