UI ember engines (#6718)

Adds replication engine and core in-repo addon

ui/.storybook/preview-head.html

@@ -1,4 +1,6 @@
-<meta name="vault/config/environment" content="%7B%22modulePrefix%22%3A%22vault%22%2C%22environment%22%3A%22development%22%2C%22rootURL%22%3A%22/ui/%22%2C%22locationType%22%3A%22auto%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%7D%7D%2C%22APP%22%3A%7B%22POLLING_URLS%22%3A%5B%22sys/health%22%2C%22sys/replication/status%22%2C%22sys/seal-status%22%5D%2C%22NAMESPACE_ROOT_URLS%22%3A%5B%22sys/health%22%2C%22sys/seal-status%22%2C%22sys/license/features%22%5D%2C%22DEFAULT_PAGE_SIZE%22%3A15%2C%22LOG_TRANSITIONS%22%3Atrue%7D%2C%22flashMessageDefaults%22%3A%7B%22timeout%22%3A7000%2C%22sticky%22%3Afalse%2C%22preventDuplicates%22%3Atrue%7D%2C%22contentSecurityPolicyHeader%22%3A%22Content-Security-Policy%22%2C%22contentSecurityPolicyMeta%22%3Atrue%2C%22contentSecurityPolicy%22%3A%7B%22connect-src%22%3A%5B%22%27self%27%22%5D%2C%22img-src%22%3A%5B%22%27self%27%22%2C%22data%3A%22%5D%2C%22form-action%22%3A%5B%22%27none%27%22%5D%2C%22script-src%22%3A%5B%22%27self%27%22%5D%2C%22style-src%22%3A%5B%22%27unsafe-inline%27%22%2C%22%27self%27%22%5D%2C%22default-src%22%3A%5B%22%27none%27%22%5D%2C%22font-src%22%3A%5B%22%27self%27%22%5D%2C%22media-src%22%3A%5B%22%27self%27%22%5D%7D%2C%22emberData%22%3A%7B%22enableRecordDataRFCBuild%22%3Afalse%7D%2C%22exportApplicationGlobal%22%3Atrue%7D" />
+<meta name="vault/config/environment" content="%7B%22modulePrefix%22%3A%22vault%22%2C%22environment%22%3A%22development%22%2C%22rootURL%22%3A%22/ui/%22%2C%22locationType%22%3A%22auto%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%2C%22EXTEND_PROTOTYPES%22%3A%7B%22Date%22%3Afalse%7D%7D%2C%22APP%22%3A%7B%22POLLING_URLS%22%3A%5B%22sys/health%22%2C%22sys/replication/status%22%2C%22sys/seal-status%22%5D%2C%22NAMESPACE_ROOT_URLS%22%3A%5B%22sys/health%22%2C%22sys/seal-status%22%2C%22sys/license/features%22%5D%2C%22DEFAULT_PAGE_SIZE%22%3A15%2C%22LOG_TRANSITIONS%22%3Atrue%7D%2C%22flashMessageDefaults%22%3A%7B%22timeout%22%3A7000%2C%22sticky%22%3Afalse%7D%2C%22contentSecurityPolicyHeader%22%3A%22Content-Security-Policy%22%2C%22contentSecurityPolicyMeta%22%3Atrue%2C%22contentSecurityPolicy%22%3A%7B%22connect-src%22%3A%5B%22%27self%27%22%5D%2C%22img-src%22%3A%5B%22%27self%27%22%2C%22data%3A%22%5D%2C%22form-action%22%3A%5B%22%27none%27%22%5D%2C%22script-src%22%3A%5B%22%27self%27%22%5D%2C%22style-src%22%3A%5B%22%27unsafe-inline%27%22%2C%22%27self%27%22%5D%2C%22default-src%22%3A%5B%22%27none%27%22%5D%2C%22font-src%22%3A%5B%22%27self%27%22%5D%2C%22media-src%22%3A%5B%22%27self%27%22%5D%7D%2C%22emberData%22%3A%7B%22enableRecordDataRFCBuild%22%3Afalse%7D%2C%22exportApplicationGlobal%22%3Atrue%7D" />
+<meta name="replication/config/environment" content="%7B%22modulePrefix%22%3A%22replication%22%2C%22environment%22%3A%22development%22%7D" />
+<meta name="vault/config/asset-manifest" content="%7B%22bundles%22%3A%7B%22replication%22%3A%7B%22assets%22%3A%5B%7B%22uri%22%3A%22/ui/engines-dist/replication/assets/engine-vendor.js%22%2C%22type%22%3A%22js%22%7D%2C%7B%22uri%22%3A%22/ui/engines-dist/replication/assets/engine.js%22%2C%22type%22%3A%22js%22%7D%5D%7D%7D%7D" />
 <link rel="stylesheet" href="/assets/vendor.css" />
 <link rel="stylesheet" href="/assets/vault.css" />
 <link rel="icon" href="/favicon.png" />

ui/app/app.js

@@ -8,10 +8,27 @@ defineModifier();
 
 let App;
 
+/* eslint-disable ember/avoid-leaking-state-in-ember-objects */
 App = Application.extend({
   modulePrefix: config.modulePrefix,
   podModulePrefix: config.podModulePrefix,
   Resolver,
+  engines: {
+    replication: {
+      dependencies: {
+        services: [
+          'auth',
+          'flash-messages',
+          'namespace',
+          'replication-mode',
+          'router',
+          'store',
+          'version',
+          'wizard',
+        ],
+      },
+    },
+  },
 });
 
 loadInitializers(App, config.modulePrefix);

ui/app/components/download-button.js

@@ -3,7 +3,7 @@ import { computed } from '@ember/object';
 import hbs from 'htmlbars-inline-precompile';
 
 export default Component.extend({
-  layout: hbs`{{#if hasBlock}} {{yield}} {{else}} {{actionText}} {{/if}}`,
+  layout: hbs`{{#if (has-block)}} {{yield}} {{else}} {{actionText}} {{/if}}`,
   tagName: 'a',
   role: 'button',
   attributeBindings: ['role', 'download', 'href'],

ui/app/components/empty-state.js

@@ -1,6 +0,0 @@
-import OuterHTML from './outer-html';
-
-export default OuterHTML.extend({
-  title: null,
-  message: null,
-});

ui/app/components/i-con.js

@@ -1,84 +0,0 @@
-import { camelize } from '@ember/string';
-import Component from '@ember/component';
-import { computed } from '@ember/object';
-import hbs from 'htmlbars-inline-precompile';
-
-/**
- * @module ICon
- * `ICon` components are glyphs used to indicate important information.
- *
- * @example
- * ```js
- * <ICon @glyph="cancel-square-outline" />
- * ```
- * @param glyph=null {String} - The glyph type.
- *
- */
-
-export const GLYPHS_WITH_SVG_TAG = [
-  'cancel-square-outline',
-  'cancel-square-fill',
-  'check-circle-fill',
-  'check-plain',
-  'checkmark-circled-outline',
-  'close-circled-outline',
-  'console',
-  'control-lock',
-  'docs',
-  'download',
-  'edition-enterprise',
-  'edition-oss',
-  'false',
-  'file',
-  'folder',
-  'hidden',
-  'information-reversed',
-  'learn',
-  'neutral-circled-outline',
-  'perf-replication',
-  'person',
-  'plus-plain',
-  'role',
-  'status-indicator',
-  'stopwatch',
-  'tour',
-  'true',
-  'upload',
-  'video',
-  'visible',
-];
-
-export default Component.extend({
-  layout: hbs`
-    {{#if excludeSVG}}
-      {{partial partialName}}
-    {{else}}
-      <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="{{size}}" height="{{size}}" viewBox="0 0 512 512">
-        {{partial partialName}}
-      </svg>
-    {{/if}}
-  `,
-
-  tagName: 'span',
-  excludeIconClass: false,
-  classNameBindings: ['excludeIconClass::icon'],
-  classNames: ['has-current-color-fill'],
-
-  attributeBindings: ['aria-label', 'aria-hidden'],
-
-  glyph: null,
-
-  excludeSVG: computed('glyph', function() {
-    let glyph = this.get('glyph');
-    return glyph.startsWith('enable/') || GLYPHS_WITH_SVG_TAG.includes(glyph);
-  }),
-
-  size: computed('glyph', function() {
-    return this.get('glyph').startsWith('enable/') ? 48 : 12;
-  }),
-
-  partialName: computed('glyph', function() {
-    const glyph = this.get('glyph');
-    return `svg/icons/${camelize(glyph)}`;
-  }),
-});

ui/app/components/info-table-row.js

@@ -1,34 +0,0 @@
-import { typeOf } from '@ember/utils';
-import { computed } from '@ember/object';
-import { or } from '@ember/object/computed';
-import Component from '@ember/component';
-
-export default Component.extend({
-  'data-test-component': 'info-table-row',
-  classNames: ['info-table-row'],
-  isVisible: or('alwaysRender', 'value'),
-
-  /*
-   * @param boolean
-   * indicates if the component content should be always be rendered.
-   * when false, the value of `value` will be used to determine if the component should render
-   */
-  alwaysRender: false,
-
-  /*
-   * @param string
-   * the display name for the value
-   *
-   */
-  label: null,
-
-  /*
-   *
-   * the value of the data passed in - by default the content of the component will only show if there is a value
-   */
-  value: null,
-
-  valueIsBoolean: computed('value', function() {
-    return typeOf(this.get('value')) === 'boolean';
-  }),
-});

ui/app/components/popup-menu.js

@@ -1,5 +0,0 @@
-import Component from '@ember/component';
-
-export default Component.extend({
-  tagName: 'span',
-});

ui/app/components/secret-form-header.js

@@ -1,50 +0,0 @@
-import { alias } from '@ember/object/computed';
-import Component from '@ember/component';
-import hbs from 'htmlbars-inline-precompile';
-
-export default Component.extend({
-  key: null,
-  mode: null,
-  path: null,
-  actionClass: null,
-
-  title: alias('key.keyWithoutParent'),
-
-  layout: hbs`
-    <div class="consul-show-header connected">
-      {{#secret-link
-        mode="list"
-        secret=key.parentKey
-        class="back-button"
-      }}
-        {{i-con glyph="chevron-left" size=11}}
-        Secrets
-      {{/secret-link}}
-
-      <div class="actions {{actionClass}}">
-        {{yield}}
-      </div>
-
-      <div class="item-name">
-        {{#if (eq mode "create") }}
-          Create a secret at
-          <code>
-            {{#if showPrefix}}
-              {{! need this to prevent a shift in the layout before we transition when saving }}
-              {{#if key.isCreating}}
-                {{key.initialParentKey}}
-              {{else}}
-                {{key.parentKey}}
-              {{/if}}
-            {{/if}}
-          </code>
-        {{/if}}
-
-        {{#if (eq mode "edit") }}
-          Edit
-        {{/if}}
-
-        <code>{{title}}</code>
-      </div>
-    </div>`,
-});

ui/app/components/status-menu.js

@@ -18,7 +18,7 @@ export default Component.extend({
   glyphName: computed('type', function() {
     const glyphs = {
       cluster: 'status-indicator',
-      user: 'person',
+      user: 'user-square-outline',
     };
     return glyphs[this.type];
   }),

ui/app/components/toolbar-actions.js

@@ -1,3 +0,0 @@
-import OuterHTML from './outer-html';
-
-export default OuterHTML.extend({});

ui/app/components/toolbar.js

@@ -1,6 +0,0 @@
-import OuterHTML from './outer-html';
-
-export default OuterHTML.extend({
-  classNames: ['toolbar'],
-  tagName: 'nav',
-});

ui/app/controllers/vault/cluster/replication/mode/secondaries/add.js

@@ -1,3 +0,0 @@
-import ReplicationController from '../../../replication';
-
-export default ReplicationController.extend();

ui/app/controllers/vault/cluster/replication/mode/secondaries/index.js

@@ -1,3 +0,0 @@
-import ReplicationController from '../../../replication';
-
-export default ReplicationController.extend();

ui/app/controllers/vault/cluster/replication/mode/secondaries/revoke.js

@@ -1 +0,0 @@
-export { default } from '../../../replication';

ui/app/helpers/includes.js

@@ -1,7 +0,0 @@
-import { helper as buildHelper } from '@ember/component/helper';
-
-export function includes([haystack, needle]) {
-  return haystack.includes(needle);
-}
-
-export default buildHelper(includes);

ui/app/helpers/reduce-to-array.js

@@ -1,17 +0,0 @@
-import { helper as buildHelper } from '@ember/component/helper';
-import { isNone, typeOf } from '@ember/utils';
-
-export function reduceToArray(params) {
-  return params.reduce(function(result, param) {
-    if (isNone(param)) {
-      return result;
-    }
-    if (typeOf(param) === 'array') {
-      return result.concat(param);
-    } else {
-      return result.concat([param]);
-    }
-  }, []);
-}
-
-export default buildHelper(reduceToArray);

ui/app/initializers/enable-engines.js

@@ -0,0 +1,13 @@
+import config from '../config/environment';
+
+export function initialize(/* application */) {
+  // attach mount hooks to the environment config
+  // context will be the router DSL
+  config.addRootMounts = function() {
+    this.mount('replication');
+  };
+}
+
+export default {
+  initialize,
+};

ui/app/mixins/cluster-route.js

@@ -13,6 +13,7 @@ export { INIT, UNSEAL, AUTH, CLUSTER, DR_REPLICATION_SECONDARY };
 
 export default Mixin.create({
   auth: service(),
+  store: service(),
 
   transitionToTargetRoute(transition) {
     const targetRoute = this.targetRouteName(transition);
@@ -28,7 +29,7 @@ export default Mixin.create({
   },
 
   clusterModel() {
-    return this.modelFor(CLUSTER);
+    return this.modelFor(CLUSTER) || this.store.peekRecord('cluster', 'vault');
   },
 
   authToken() {

ui/app/models/cluster.js

@@ -70,7 +70,7 @@ export default DS.Model.extend({
   }),
 
   stateGlyph(state) {
-    const glyph = 'checkmark-circled-outline';
+    const glyph = 'check-circled-outline';
 
     const glyphs = {
       'stream-wals': 'android-sync',

ui/app/router.js

@@ -114,22 +114,9 @@ Router.map(function() {
         this.route('edit', { path: '/:policy_name/edit' });
       });
       this.route('replication-dr-promote');
-      this.route('replication', function() {
+      if (config.addRootMounts) {
-        this.route('index', { path: '/' });
+        config.addRootMounts.call(this);
-        this.route('mode', { path: '/:replication_mode' }, function() {
+      }
-          //details
-          this.route('index', { path: '/' });
-          this.route('manage');
-          this.route('secondaries', function() {
-            this.route('add', { path: '/add' });
-            this.route('revoke', { path: '/revoke' });
-            this.route('config-show', { path: '/config/show/:secondary_id' });
-            this.route('config-edit', { path: '/config/edit/:secondary_id' });
-            this.route('config-create', { path: '/config/create/:secondary_id' });
-          });
-        });
-      });
-
       this.route('not-found', { path: '/*path' });
     });
     this.route('not-found', { path: '/*path' });

ui/app/routes/vault/cluster/replication/mode/index.js

@@ -1,13 +0,0 @@
-import { inject as service } from '@ember/service';
-import Route from '@ember/routing/route';
-
-export default Route.extend({
-  replicationMode: service(),
-  beforeModel() {
-    const replicationMode = this.paramsFor('vault.cluster.replication.mode').replication_mode;
-    this.get('replicationMode').setMode(replicationMode);
-  },
-  model() {
-    return this.modelFor('vault.cluster.replication.mode');
-  },
-});

ui/app/styles/components/console-ui-panel.scss

@@ -106,7 +106,7 @@
   margin-left: calc(#{$console-spacing} - 0.33rem);
   position: relative;
 
-  .icon {
+  .hs-icon {
     position: absolute;
     left: 0;
     top: 0;

ui/app/styles/components/env-banner.scss

@@ -1,10 +1,24 @@
 .env-banner {
-  &,
+  align-self: center;
-  &:not(:last-child):not(:last-child) {
+  border-radius: 3rem;
+  background: linear-gradient(135deg, $blue, $purple);
+  animation: env-banner-color-rotate 8s infinite linear alternate;
+  color: $white;
+  margin-top: -20px;
+
+  .hs-icon {
     margin: 0;
   }
 
-  .level-item {
+  .notification {
-    padding: $size-10 $size-8;
+    background-color: transparent;
+    line-height: 1.66;
+    padding: 0 $spacing-s;
+  }
+}
+
+@keyframes env-banner-color-rotate {
+  100% {
+    filter: hue-rotate(105deg);
   }
 }

ui/app/styles/components/hs-icon.scss

@@ -0,0 +1,37 @@
+.hs-icon {
+  flex: 0 0 auto;
+  display: inline-flex;
+  justify-content: center;
+  align-items: flex-start;
+  vertical-align: middle;
+  width: 16px;
+  min-width: fit-content;
+  margin: 2px 4px;
+}
+
+.hs-icon svg {
+  fill: currentColor;
+  flex: 1 1 0;
+}
+
+.hs-icon-button-right {
+  margin-left: 0.25rem;
+  margin-right: -0.5rem;
+  align-items: center;
+}
+
+.hs-icon-s {
+  width: 12px;
+}
+
+.hs-icon-l {
+  width: 20px;
+}
+
+.hs-icon-xl {
+  width: 28px;
+}
+
+.hs-icon-xxl {
+  width: 32px;
+}

ui/app/styles/components/info-table-row.scss

@@ -27,9 +27,15 @@
     }
   }
 
-  .icon {
+  .hs-icon {
     margin-right: 0.25rem;
   }
+  .icon-true {
+    color: $green-500;
+  }
+  .icon-false {
+    color: $ui-gray-300;
+  }
 }
 
 .info-table-row:not(.is-mobile) .column {

ui/app/styles/components/navigate-input.scss

@@ -0,0 +1,5 @@
+.search-icon {
+  position: absolute;
+  top: 6px;
+  left: 2px;
+}

ui/app/styles/components/search-select.scss

@@ -122,3 +122,9 @@
     animation: drop-fade-above 0.15s;
   }
 }
+
+.search-select .search-icon {
+  position: absolute;
+  width: 20px;
+  top: 5px;
+}

ui/app/styles/components/tool-tip.scss

@@ -50,18 +50,6 @@
 .ember-basic-dropdown-content--above.tool-tip {
   margin-top: -2px;
 }
-.tool-tip-trigger {
-  border: none;
-  border-radius: 20px;
-  height: 18px;
-  width: 18px;
-  outline: none;
-  box-shadow: none;
-  cursor: pointer;
-  padding: 0;
-  color: $grey-dark;
-  margin-left: 8px;
-}
 
 .b-checkbox .tool-tip-trigger {
   position: relative;

ui/app/styles/components/ui-wizard.scss

@@ -70,7 +70,7 @@
 
 .wizard-header {
   border-bottom: $light-border;
-  padding: 0 $size-4 $size-8 2rem;
+  padding: 0 $size-4 $size-8 0;
   margin: $size-4 0;
   position: relative;
 
@@ -78,12 +78,6 @@
     margin-top: 0;
     padding-top: 0;
   }
-
-  .title .icon {
-    left: 0;
-    position: absolute;
-    top: 0;
-  }
 }
 
 .wizard-dismiss-menu {
@@ -117,10 +111,6 @@
 
   .title {
     color: $white;
-
-    .icon {
-      top: -0.1rem;
-    }
   }
 
   .wizard-header {
@@ -154,12 +144,6 @@
   }
 }
 
-.wizard-section .title .icon {
-  height: auto;
-  margin-right: $size-11;
-  width: auto;
-}
-
 .wizard-section:last-of-type {
   margin-bottom: $size-5;
 }
@@ -236,6 +220,7 @@
   transform: translate(-50%, -50%);
   width: $wizard-progress-check-size;
   z-index: 10;
+  margin: 0 !important;
 }
 
 .feature-progress-container .feature-check {
@@ -258,10 +243,10 @@
   }
 }
 
-.incomplete-check svg {
+.incomplete-check {
-  fill: $ui-gray-200;
+  color: $ui-gray-200;
 }
 
-.completed-check svg {
+.completed-check {
-  fill: $green;
+  color: $green;
 }

ui/app/styles/core.scss

@@ -66,6 +66,7 @@
 @import './components/masked-input';
 @import './components/namespace-picker';
 @import './components/namespace-reminder';
+@import './components/navigate-input';
 @import './components/page-header';
 @import './components/popup-menu';
 @import './components/radial-progress';
@@ -83,3 +84,6 @@
 @import './components/upgrade-overlay';
 @import './components/ui-wizard';
 @import './components/vault-loading';
+
+// bulma-free-zone
+@import './components/hs-icon';

ui/app/styles/core/buttons.scss

@@ -158,20 +158,17 @@ $button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12);
 
   .has-text-info & {
     font-weight: $font-weight-semibold;
-
-    .icon {
-      vertical-align: middle;
-    }
   }
 
   &.tool-tip-trigger {
-    color: $black;
+    color: $grey-dark;
     min-width: auto;
+    padding: 0;
   }
 
   &.has-icon-left,
   &.has-icon-right {
-    .icon {
+    .hs-icon {
       height: 16px;
       min-width: auto;
       width: 16px;
@@ -179,7 +176,7 @@ $button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12);
   }
 
   &.has-icon-left {
-    .icon {
+    .hs-icon {
       &,
       &:first-child:last-child {
         position: relative;
@@ -189,7 +186,7 @@ $button-box-shadow-standard: 0 3px 1px 0 rgba($black, 0.12);
   }
 
   &.has-icon-right {
-    .icon {
+    .hs-icon {
       &,
       &:first-child:last-child {
         margin-left: $spacing-xxs;

ui/app/styles/core/message.scss

@@ -101,8 +101,7 @@
   display: flex;
   margin: 0 0 $spacing-l;
 
-  .icon {
+  .hs-icon {
-    flex: 0;
     margin: 0 $spacing-xxs 0 0;
     min-width: fit-content;
   }

ui/app/styles/core/navbar.scss

@@ -159,7 +159,6 @@
     font-size: 1rem;
     height: auto;
     justify-content: flex-start;
-    padding: 0 $spacing-xxs;
     text-align: left;
     width: 100%;
 

ui/app/templates/components/alert-inline.hbs

@@ -1,8 +0,0 @@
-<ICon
-  @glyph="{{this.alertType.glyph}}"
-  @class="{{this.alertType.glyphClass}}"
-  @size="16"
-/>
-<p class="{{this.textClass}}">
-  {{@message}}
-</p>

ui/app/templates/components/alert-popup.hbs

@@ -1,11 +1,18 @@
 <div class="message {{type.class}}">
   <div class="columns is-mobile is-variable is-1">
     <div class="column is-narrow message-icon">
-      <ICon @glyph="{{type.glyph}}" @size="20" @excludeIconClass={{true}} />
+      <Icon
+        aria-hidden="true"
+        class="hs-icon-l"
+        @glyph="{{type.glyph}}"
+      />
     </div>
     <div class="column">
       <button type="button" class="close-button" {{action close}}>
-        <ICon @excludeIconClass={{true}} @glyph="close" @aria-label="Close" />
+        <Icon
+          @glyph="cancel-plain"
+          @aria-label="Close"
+        />
       </button>
       <div class="message-title">
         {{type.text}}

ui/app/templates/components/auth-form.hbs

@@ -1,7 +1,7 @@
 <div class="auth-form">
   {{#if showLoading}}
     <div class="vault-loader">
-      {{partial 'svg/vault-loading'}}
+      <VaultLogoSpinner />
     </div>
   {{/if}}
   {{#if hasMethodsWithPath}}

ui/app/templates/components/console/command-input.hbs

@@ -2,12 +2,12 @@
   {{#if isRunning}}
     <div class="control console-spinner is-loading"></div>
   {{else}}
-    {{i-con glyph="chevron-right" size=12 }}
+    <Chevron />
   {{/if}}
   <input onkeyup={{action 'handleKeyUp'}} value={{value}} autocomplete="off" spellcheck="false" />
   {{#tool-tip horizontalPosition="auto-right" verticalPosition=(if isFullscreen "above" "below") as |d|}}
     {{#d.trigger tagName="button" type="button" class=(concat "button is-compact" (if isFullscreen " active")) click=(action "fullscreen") data-test-tool-tip-trigger=true}}
-      {{i-con glyph=(if isFullscreen "fullscreen-close" "fullscreen-open") aria-hidden="true" size=16}}
+    <Icon class="hs-icon-l" @glyph={{if isFullscreen "expand-less" "expand-more"}} aria-label={{if isFullscreen "Minimize" "Maximize"}} />
     {{/d.trigger}}
     {{#d.content class="tool-tip"}}
       <div class="box">

ui/app/templates/components/console/log-command.hbs

@@ -1 +1,2 @@
-<pre class="console-ui-command">{{i-con glyph="chevron-right" size=12}}{{content}}</pre>
+{{!-- using Icon here instead of Chevron because two nested tagless components results in a rendered line break between the tags breaking the layout in the <pre> --}}
+<pre class="console-ui-command"><Icon @glyph="chevron-right" aria-hidden="true" />{{content}}</pre>

ui/app/templates/components/console/log-error-with-html.hbs

@@ -1,5 +1,5 @@
 {{! template-lint-disable no-triple-curlies}}
 <div class="console-ui-alert has-text-danger">
-  {{i-con glyph="close-circled" aria-hidden="true" size=12}}
+  <Icon @glyph="cancel-circle-fill" aria-hidden="true" />
   <pre>{{{content}}}</pre>
 </div>

ui/app/templates/components/console/log-error.hbs

@@ -1,4 +1,4 @@
 <div class="console-ui-alert has-text-danger">
-  {{i-con glyph="close-circled" aria-hidden="true" size=12}}
+  <Icon @glyph="cancel-circle-fill" aria-hidden="true" />
   <pre>{{content}}</pre>
 </div>

ui/app/templates/components/console/log-help.hbs

@@ -1,5 +1,5 @@
 <div class="console-ui-alert has-text-grey">
-{{i-con glyph="information-circled" aria-hidden="true" size=12}}
+<Icon @glyph="info-circle-fill" aria-hidden="true" />
 <pre>Usage: vault &lt;command&gt; [args]
 
 Commands:

ui/app/templates/components/console/log-success.hbs

@@ -1,4 +1,4 @@
 <div class="console-ui-alert has-text-success">
-  {{i-con glyph="checkmark-circled" aria-hidden="true" size=12}}
+  <Icon @glyph="check-circle-fill" aria-hidden="true" />
   <pre>{{content}}</pre>
 </div>

ui/app/templates/components/console/ui-panel.hbs

@@ -1,5 +1,5 @@
-<button type="button" class="button is-ghost console-close-button" aria-label="close console" {{action "closeConsole"}}>
+<button type="button" class="button is-ghost console-close-button" {{action "closeConsole"}}>
-  <ICon @glyph="close" @size=16 />
+  <Icon @glyph="cancel-plain" aria-label="Close console" />
 </button>
 <div class="console-ui-panel-content">
   <div class="content">

ui/app/templates/components/control-group-success.hbs

@@ -1,6 +1,6 @@
 {{#if (and controlGroupResponse.token controlGroupResponse.uiParams.url)}}
   <div class="control-group-success" data-test-navigate-message>
-    You have been granted access to <code>{{model.requestPath}}</code>. Be careful, you can only access this data once. 
+    You have been granted access to <code>{{model.requestPath}}</code>. Be careful, you can only access this data once.
     If you need access again in the future you will need to get authorized again.
     <div class="box is-shadowless is-fullwidth is-marginless has-slim-padding">
       <button data-test-navigate-button type="button" class="button is-primary" {{action (perform markAndNavigate)}}>Visit</button>
@@ -26,7 +26,7 @@
     </div>
     <div class="field is-grouped box is-fullwidth is-bottomless">
       {{#link-to 'vault.cluster.access.control-groups' class="button"}}
-        <ICon @glyph="chevron-left" @size=10 /> Back
+        <Chevron @direction="left" /> Back
       {{/link-to}}
     </div>
   {{else}}

ui/app/templates/components/control-group.hbs

@@ -2,7 +2,7 @@
   <MessageError @model={{model}} />
   <div class="control-group-header {{if isSuccess 'is-success'}}">
     <p>
-      <ICon @glyph={{if isSuccess "checkmark-circled" "control-lock"}} @size={{16}} />
+      <Icon @glyph={{if isSuccess "check-circle-fill" "lock-closed"}} />
       <strong data-test-banner-prefix>{{bannerPrefix}}</strong>
       <span data-test-banner-text>{{bannerText}}</span>
     </p>
@@ -42,7 +42,7 @@
       <div class="authorizations" data-test-authorizations>
         {{#if (gt model.authorizations.length 0)}}
         <span class="has-text-success">
-          <ICon @glyph="checkmark-circled-outline" @size={{16}} />
+          <Icon @glyph="check-circle-outline" />
         </span>
           Already approved by
           {{#each model.authorizations as |authorization index|}}
@@ -54,7 +54,7 @@
           {{/each}}
         {{else}}
           <span class="has-text-grey">
-            <ICon @glyph="checkmark-circled-outline" @size={{16}} />
+            <Icon @glyph="check-circle-outline" />
           </span>
           Awaiting authorization.
         {{/if}}
@@ -74,7 +74,7 @@
       {{#if model.canAuthorize}}
         {{#if (or model.approved currentUserHasAuthorized)}}
           {{#link-to 'vault.cluster.access.control-groups'class="button" data-test-back-link=true}}
-            <ICon @glyph="chevron-left" @size=10 /> Back
+            <Chevron @direction="left" /> Back
           {{/link-to}}
         {{else}}
           <button

ui/app/templates/components/edition-badge.hbs

@@ -1,4 +1,4 @@
 {{#if icon}}
-  <ICon @glyph={{icon}} @size=12 />
+  <Icon @glyph={{icon}} />
 {{/if}}
 {{edition}}

ui/app/templates/components/home-link.hbs

@@ -1,5 +1,5 @@
 <span class={{class}}>
-  {{#if hasBlock}}
+  {{#if (has-block)}}
     {{yield}}
   {{else}}
     {{text}}

ui/app/templates/components/hover-copy-button.hbs

@@ -2,11 +2,11 @@
   <T.trigger data-test-tooltip-trigger tabindex=false>
     <CopyButton
       data-test-hover-copy-button
+      class="copy-button button is-compact is-transparent"
       @clipboardText={{copyValue}}
-      @class="copy-button button is-compact is-transparent"
       @success={{action (mut tooltipText) "Copied!"}}
     >
-      <ICon @glyph="copy" aria-hidden="true" @size=16 />
+      <Icon @glyph="copy-action" aria-label="Copy" />
     </CopyButton>
   </T.trigger>
   <T.content @class="tool-tip">

ui/app/templates/components/identity/item-aliases.hbs

@@ -9,11 +9,10 @@
       <div class="column is-10">
         {{#link-to "vault.cluster.access.identity.aliases.show" item.id "details"
           class="has-text-black has-text-weight-semibold"
-          }}{{i-con
+          }}<Icon
-            glyph='role'
+              @glyph="user-square-outline"
-            size=14
+              class="has-text-grey-light"
-            class="has-text-grey-light"
+            /><span class="has-text-weight-semibold">{{item.name}}</span>{{/link-to}}
-            }}<span class="has-text-weight-semibold">{{item.name}}</span>{{/link-to}}
         <div class="has-text-grey">
           {{item.id}}
         </div>

ui/app/templates/components/identity/item-groups.hbs

@@ -2,11 +2,11 @@
   {{#each model.directGroupIds as |gid|}}
     {{#link-to "vault.cluster.access.identity.show" "groups" gid "details"
       class="list-item-row"
-    }}{{i-con
+    }}<Icon
-        glyph='folder'
+        @glyph="folder-outline"
-        size=14
         class="has-text-grey-light"
-        }}{{gid}}{{/link-to}}
+      />{{gid}}
+    {{/link-to}}
   {{/each}}
   {{#each model.inheritedGroupIds as |gid|}}
     {{#linked-block
@@ -15,11 +15,10 @@
     }}
       {{#link-to "vault.cluster.access.identity.show" "groups" gid "details"
          class="has-text-black"
-      }}{{i-con
+      }}<Icon
-          glyph='folder'
+          @glyph="folder-outline"
-          size=14
           class="has-text-grey-light"
-          }}{{gid}}
+        />{{gid}}
       {{/link-to}}
       <span class="tag has-text-grey is-size-8">inherited</span>
     {{/linked-block}}

ui/app/templates/components/identity/item-members.hbs

@@ -9,13 +9,12 @@
     }}
       <div class="columns is-mobile">
         <div class="column is-10">
-          {{#link-to "vault.cluster.access.identity.show" "groups" gid "details" 
+          {{#link-to "vault.cluster.access.identity.show" "groups" gid "details"
             class="is-block has-text-black has-text-weight-semibold"
-          }}{{i-con
+          }}<Icon
-              glyph='folder'
+              @glyph="folder-outline"
-              size=14
               class="has-text-grey-light"
-              }}{{gid}}{{/link-to}}
+            />{{gid}}{{/link-to}}
         </div>
         <div class="column has-text-right">
           {{#if model.canEdit}}
@@ -37,11 +36,10 @@
         <div class="column is-10">
           {{#link-to "vault.cluster.access.identity.show" "entities" gid "details"
             class="is-block has-text-black has-text-weight-semibold"
-            }}{{i-con
+            }}<Icon
-              glyph='role'
+                @glyph="user-square-outline"
-              size=14
+                class="has-text-grey-light"
-              class="has-text-grey-light"
+              />{{gid}}{{/link-to}}
-              }}{{gid}}{{/link-to}}
         </div>
         <div class="column has-text-right">
           {{#if model.canEdit}}

ui/app/templates/components/identity/item-parent-groups.hbs

@@ -11,11 +11,11 @@
         <div class="column is-10">
           {{#link-to "vault.cluster.access.identity.show" "groups" gid "details"
             class="is-block has-text-black has-text-weight-semibold"
-          }}{{i-con
+          }}<Icon
-              glyph='folder'
+              @glyph="folder-outline"
-              size=14
               class="has-text-grey-light"
-              }}{{gid}}{{/link-to}}
+            />{{gid}}
+          {{/link-to}}
         </div>
         <div class="column has-text-right">
         </div>

ui/app/templates/components/info-tooltip.hbs

@@ -1,11 +1,9 @@
 {{#tool-tip as |d|}}
-  {{#d.trigger tagName="button" type="button" class=(concat "tool-tip-trigger button") data-test-tool-tip-trigger=true}}
+  {{#d.trigger tagName="button" type="button" class="tool-tip-trigger button is-ghost is-compact" data-test-tool-tip-trigger=true}}
-    {{i-con glyph="information-reversed"
+    <Icon @glyph="info-circle-outline"
       class="auto-width"
-      size=16
       aria-label="help"
-      excludeIconClass=true
+    />
-    }}
   {{/d.trigger}}
   {{#d.content class="tool-tip"}}
     <div class="box">

ui/app/templates/components/kv-object-editor.hbs

@@ -44,7 +44,7 @@
           aria-label="Delete row"
           data-test-kv-delete-row
         >
-          {{i-con size=22 glyph='trash-a' excludeIconClass=true class="is-large has-text-grey-light"}}
+        <Icon @glyph="trash" class="hs-icon-l" />
         </button>
       {{/if}}
     </div>

ui/app/templates/components/license-info.hbs

@@ -71,10 +71,10 @@
     {{#each featuresInfo as |info|}}
       {{#info-table-row label=info.name value=(if info.active "Active" "Not Active") data-test-feature-row="data-test-feature-row"}}
         {{#if info.active}}
-        <ICon @size=28 @glyph="true" /> <span data-test-feature-status>Active {{#if info.count}}&mdash;
+        <Icon @glyph="check-circle-outline" class="hs-icon-l icon-true" aria-hidden="true" /> <span data-test-feature-status>Active {{#if info.count}}&mdash;
          {{info.count}} standby nodes allotted{{/if}}</span>
         {{else}}
-          <ICon @size=28 @glyph="false" /> <span data-test-feature-status>Not Active</span>
+          <Icon @glyph="cancel-circle-outline" class="hs-icon-l icon-false" aria-hidden="true" /> <span data-test-feature-status>Not Active</span>
         {{/if}}
       {{/info-table-row}}
     {{/each}}

ui/app/templates/components/list-pagination.hbs

@@ -8,14 +8,14 @@
       )
       class="pagination-previous"
     }}
-      {{i-con glyph="chevron-left" size=10}}
+      <Chevron @direction="left"/>
       <span class="pagination-previous-label">
         Previous
       </span>
     {{/link-to}}
   {{else}}
     <button type="button" disabled=true class="pagination-previous is-invisible" aria-hidden=true>
-      {{i-con glyph="chevron-left" size=10}}
+      <Chevron @direction="left" />
       <span class="pagination-previous-label">
         Previous
       </span>
@@ -32,14 +32,14 @@
       <span class="pagination-next-label">
         Next
       </span>
-      {{i-con glyph="chevron-right" size=11}}
+      <Chevron />
     {{/link-to}}
   {{else}}
     <button type="button" disabled=true class="pagination-next is-invisible" aria-hidden=true>
       <span class="pagination-next-label">
         Next
       </span>
-      {{i-con glyph="chevron-right" size=11}}
+      <Chevron />
     </button>
   {{/if}}
   {{#if segmentLinks }}

ui/app/templates/components/masked-input.hbs

@@ -18,14 +18,14 @@
   {{#if allowCopy}}
     <CopyButton
       @clipboardText={{value}}
-      @class="copy-button button {{if displayOnly "is-compact"}}"
       @success={{success}}
+      class="copy-button button {{if displayOnly "is-compact"}}"
       data-test-copy-button
     >
-      <ICon @glyph="copy" aria-hidden="true" @size=16 />
+      <Icon @glyph="copy-action" aria-hidden="Copy value" />
     </CopyButton>
   {{/if}}
   <button {{action "toggleMask"}}  class="{{if (eq value "") "has-text-grey"}} masked-input-toggle button {{if displayOnly "is-compact"}}" data-test-button>
-    {{i-con glyph=(if shouldObscure "hidden" "visible") aria-hidden="true" size=16}}
+    <Icon @glyph={{if shouldObscure "visibility-hide" "visibility-show"}} aria-hidden="true" />
 	</button>
 </div>

ui/app/templates/components/menu-sidebar.hbs

@@ -9,12 +9,12 @@
   </ul>
   <div class="menu-toggle">
     {{#if isActive}}
-      <button type="button" class="button is-ghost" aria-label="close menu" {{action "closeMenu"}}>
+      <button type="button" class="button is-ghost" {{action "closeMenu"}}>
-        {{i-con glyph="close" size=16}}
+        <Icon @glyph="cancel-plain" aria-label="Close menu" />
       </button>
     {{else}}
-      <button type="button" class="button is-ghost has-text-grey-light" aria-label="open menu" {{action "openMenu"}}>
+      <button type="button" class="button is-ghost has-text-grey-light" {{action "openMenu"}}>
-        <ICon @glyph="more-vertical" @size=16 />
+        <Icon @glyph="more-vertical" aria-label="Open menu" />
       </button>
     {{/if}}
   </div>

ui/app/templates/components/mount-backend-form.hbs

@@ -3,10 +3,9 @@
     <h1 class="title is-3" data-test-mount-form-header="true">
       {{#if showEnable}}
         {{#with (find-by "type" mountModel.type mountTypes) as |typeInfo|}}
-          <ICon
+          <Icon
-            @size="24"
+            @glyph={{or typeInfo.glyph typeInfo.type}}
-            @glyph={{concat "enable/" (or typeInfo.glyph typeInfo.type)}}
+            class="has-text-grey-light hs-icon-l"
-            @class="has-text-grey-light"
            />
 
           {{#if (eq mountType "auth")}}
@@ -56,11 +55,9 @@
               data-test-mount-type-radio
               data-test-mount-type={{type.type}}
             >
-              <ICon
+              <Icon
-                @size="36"
+                @glyph={{or type.glyph type.type}}
-                @excludeIconClass={{true}}
+                class="has-text-grey-light hs-icon-xl"
-                @glyph={{concat "enable/" (or type.glyph type.type)}}
-                @class="has-text-grey-light"
                />
 
               {{type.displayName}}

ui/app/templates/components/namespace-link.hbs

@@ -1,14 +1,16 @@
 {{#link-to "vault.cluster.secrets" (query-params namespace=normalizedNamespace)
   class=(concat "is-block " class)
 }}
-  {{#if hasBlock}}
+  {{#if (has-block)}}
     {{yield}}
   {{else}}
     <div class="level is-mobile">
       <span class="level-left">{{namespaceDisplay}}</span>
-      <button type="button" class="button is-ghost icon level-right">
+      <span class="level-right">
-        <ICon @glyph="chevron-right" @size="12" @class="has-text-grey" />
+        <button type="button" class="button is-ghost icon">
-      </button>
+          <Chevron @isButton={{true}} class="has-text-grey" />
+        </button>
+      </span>
     </div>
   {{/if}}
 {{/link-to}}

ui/app/templates/components/namespace-picker.hbs

@@ -16,11 +16,9 @@
         {{else}}
           <span class="namespace-name is-hidden-tablet">/ (Root)</span>
         {{/if}}
-        <ICon
+        <Chevron
-          @glyph="chevron-down"
+          @direction="down"
-          @size=8
           @class="has-text-white auto-width is-status-chevron"
-          aria-hidden="true"
         />
       </D.trigger>
       <D.content @class="namespace-picker-content">
@@ -28,11 +26,9 @@
           <div class="level-left">
             {{#if (not isUserRootNamespace)}}
               <NamespaceLink @targetNamespace={{or (object-at (dec 2 menuLeaves.length) lastMenuLeaves) auth.authData.userRootNamespace}} @class="namespace-link button is-ghost icon">
-                <ICon
+                <Chevron
-                  @glyph="chevron-left"
+                  @direction="left"
-                  @size=12
                   @class="has-text-info"
-                  aria-hidden="true"
                 />
               </NamespaceLink>
             {{/if}}
@@ -49,7 +45,9 @@
           <h5 class="list-header">Current namespace</h5>
           <div class="level is-mobile namespace-link">
             <span class="level-left">{{if namespacePath (concat namespacePath "/") "root"}}</span>
-            <ICon @glyph="checkmark-circled-outline" @size="16" @class="has-text-success level-right" />
+            <span class="level-right">
+              <Icon @glyph="check-circle-outline" class="has-text-success" />
+            </span>
           </div>
         </header>
         <div class="namespace-list {{if isAnimating "animated-list"}}">

ui/app/templates/components/nav-header.hbs

@@ -5,7 +5,7 @@
 
   {{#unless navDrawerOpen}}
   <button class="navbar-drawer-toggle is-hidden-tablet" {{action "toggleNavDrawer"}}>
-      <ICon @glyph="more-vertical" @size="16" /> Menu
+      <Icon @glyph="more-vertical" /> Menu
     </button>
   {{/unless}}
 
@@ -29,7 +29,7 @@
 
     {{#if navDrawerOpen}}
       <button class=" navbar-drawer-toggle is-hidden-tablet" type="button" {{action "toggleNavDrawer" false}}>
-        <ICon @glyph="close" @size="16" />
+        <Icon @glyph="cancel-plain" />
       </button>
     {{/if}}
   </div>

ui/app/templates/components/navigate-input.hbs

@@ -1,5 +1,5 @@
 <div class="field">
-  <p class="control has-icons-left has-icons-right">
+  <p class="control has-icons-left">
   <input
     class="filter input"
     disabled={{disabled}}
@@ -13,7 +13,6 @@
     onfocus={{action "setFilterFocused" true}}
     onblur={{action "setFilterFocused" false}}
    />
-
+    <Icon @glyph="search" class="search-icon has-text-grey-light hs-icon-l" />
-    {{i-con glyph="ios-search-strong" class="is-left has-text-grey-light" size=20}}
   </p>
 </div>

ui/app/templates/components/pgp-file.hbs

@@ -48,7 +48,7 @@
           <input class="file-input" type="file" onchange={{action "pickedFile"}} data-test-pgp-file-input=true>
           <span class="file-cta is-fullwidth">
             <span class="file-icon has-text-grey-dark">
-              {{i-con glyph="document" size=16}}
+              <Icon @glyph="file-outline" />
             </span>
             <span class="file-label has-text-grey-dark" data-test-pgp-file-input-label=true>
               {{#if key.fileName}}
@@ -59,7 +59,10 @@
             </span>
             {{#if key.fileName}}
               <button type="button" class="file-delete-button" {{action 'clearKey'}} data-test-pgp-clear=true>
-                {{i-con glyph="close" size=16}}
+                <Icon
+                  @glyph="cancel-plain"
+                  @aria-label="Close"
+                />
               </button>
             {{/if}}
           </span>

ui/app/templates/components/replication-actions.hbs

@@ -1,5 +0,0 @@
-{{message-error errors=errors}}
-{{#if loading}}
-{{else}}
-  {{partial (concat 'partials/replication/' selectedAction)}}
-{{/if}}

ui/app/templates/components/replication-mode-summary.hbs

@@ -1 +0,0 @@
-{{partial partialName}}

ui/app/templates/components/replication-summary.hbs

@@ -1,24 +0,0 @@
-{{#if (not version.hasDRReplication)}}
-  {{upgrade-page title="Replication"}}
-{{else if (or cluster.allReplicationDisabled cluster.replicationAttrs.replicationDisabled)}}
-  {{partial 'partials/replication/enable'}}
-{{else if showModeSummary}}
-  {{partial 'partials/replication/mode-summary'}}
-{{else}}
-  {{#if (eq replicationAttrs.mode 'initializing')}}
-    The cluster is initializing replication. This may take some time.
-  {{else}}
-    {{info-table-row label="Mode" value=replicationAttrs.mode}}
-    {{info-table-row label="Replication set" value=replicationAttrs.clusterId}}
-    {{info-table-row label="Secondary ID" value=replicationAttrs.secondaryId}}
-    {{info-table-row label="State" value=replicationAttrs.state}}
-    {{info-table-row label="Primary cluster address" value=replicationAttrs.primaryClusterAddr}}
-    {{info-table-row label="Replication state" value=replicationAttrs.replicationState}}
-    {{info-table-row label="Last WAL entry" value=replicationAttrs.lastWAL}}
-    {{info-table-row label="Last Remote WAL entry" value=replicationAttrs.lastRemoteWAL}}
-    {{info-table-row label="Merkle root index" value=replicationAttrs.merkleRoot}}
-    {{#if replicationAttrs.syncProgress}}
-      {{info-table-row label="Sync progress" value=(concat replicationAttrs.syncProgress.progress '/' replicationAttrs.syncProgress.total)}}
-    {{/if}}
-  {{/if}}
-{{/if}}

ui/app/templates/components/search-select-placeholder.hbs

@@ -1,6 +1,6 @@
 <div class="field">
   <p class="control has-icons-left has-icons-right">
     <span class="input has-text-grey-light">Search</span>
-    {{i-con glyph="ios-search-strong" class="is-left has-text-grey-light" size=16}}
+    <Icon @glyph="search" class="search-icon has-text-grey-light" aria-hidden="true" />
   </p>
 </div>

ui/app/templates/components/search-select.hbs

@@ -49,7 +49,7 @@
             data-test-selected-list-button="delete"
             {{action "discardSelection" selected}}
           >
-            {{i-con size=16 glyph="trash-a" excludeIconClass=true}}
+            <Icon @glyph="trash" />
           </button>
         </div>
       </li>

ui/app/templates/components/secret-edit-display.hbs

@@ -91,11 +91,9 @@
               {{action @editActions.deleteRow secret.name}}
               aria-label="Delete row"
             >
-              <ICon
+              <Icon
-                @size="22"
+                @glyph="trash"
-                @glyph="trash-a"
+                class="hs-icon-l has-text-grey-light"
-                @excludeIconClass={{true}}
-                class="is-large has-text-grey-light"
               />
             </button>
           {{/if}}

ui/app/templates/components/secret-edit.hbs

@@ -56,8 +56,7 @@
           @class={{concat "popup-menu-trigger toolbar-link" (if D.isOpen " is-active")}}
           @tagName="button"
         >
-          History
+          History <Chevron @direction="down" @isButton={{true}} />
-          <ICon @glyph="chevron-down" @size="12" />
         </D.trigger>
         <D.content @class="popup-menu-content ">
           <nav class="box menu">
@@ -79,9 +78,9 @@
                 <LinkTo class="link" @params={{array (query-params version=secretVersion.version)}}>
                   Version {{secretVersion.version}}
                   {{#if (eq secretVersion.version this.model.currentVersion)}}
-                    <ICon @glyph="checkmark-circled-outline" @excludeIconClass={{true}} @size="13" @class="has-text-success is-pulled-right" />
+                    <Icon @glyph="check-circle-outline" class="has-text-success is-pulled-right" />
                   {{else if secretVersion.deleted}}
-                    <ICon @glyph="cancel-square-outline" @size="13" @excludeIconClass={{true}} @class="has-text-grey is-pulled-right" />
+                    <Icon @glyph="cancel-square-outline" class="has-text-grey is-pulled-right" />
                   {{/if}}
                 </LinkTo>
               </li>
@@ -105,7 +104,7 @@
         data-test-secret-delete="true"
         >
         Delete secret
-        <ICon @glyph="chevron-right" @size="12" />
+        <Chevron @isButton={{true}} />
       </ConfirmAction>
     {{/if}}
 
@@ -125,7 +124,7 @@
               @tagName="button"
             >
               Copy secret
-              <ICon @glyph="chevron-down" @size="12" />
+              <Chevron @direction="down" @isButton={{true}} />
             </D.trigger>
             <D.content @class="popup-menu-content is-wide">
               <nav class="box menu">

ui/app/templates/components/secret-list-header.hbs

@@ -16,7 +16,7 @@
     </p.top>
     <p.levelLeft>
       <h1 class="title is-3">
-        {{i-con glyph=(or (concat "enable/" model.engineType) "enable/secrets") size=24 class="has-text-grey-light"}}
+        <Icon @glyph={{or model.engineType "secrets"}} class="hs-icon-xl has-text-grey-light" />
         {{model.id}}
         {{#if (eq model.options.version 2)}}
           <span class="tag">

ui/app/templates/components/secret-version-menu.hbs

@@ -10,16 +10,16 @@
         @tagName="button"
       >
         {{#if useDefaultTrigger}}
-          <ICon aria-label="More options" @glyph="more" @size="16" @class="has-text-black auto-width" />
+          <Icon aria-label="More options" @glyph="more-horizontal" class="has-text-black auto-width" />
         {{else}}
           Version {{this.version.version}}
-          <ICon @glyph="chevron-down" @size="12" />
+          <Chevron @direction="down" @isButton={{true}} />
         {{/if}}
       </D.trigger>
       <D.content @class="popup-menu-content ">
         <nav class="box menu">
           <ul class="menu-list">
-            {{#if hasBlock}}
+            {{#if (has-block)}}
               {{yield}}
             {{/if}}
             {{#if this.version.destroyed}}

ui/app/templates/components/shamir-flow.hbs

@@ -131,7 +131,7 @@
         </div>
       {{/if}}
       <div class="box is-shadowless is-marginless no-padding-top is-fullwidth" data-test-form-text>
-        {{#if hasBlock}}
+        {{#if (has-block)}}
           {{yield}}
         {{else if formText}}
           {{formText}}

ui/app/templates/components/status-menu.hbs

@@ -1,10 +1,10 @@
 {{#basic-dropdown-hover horizontalPosition="auto-left" verticalPosition="below" renderInPlace=media.isMobile as |d|}}
   {{#d.trigger tagName=(if (eq type "replication") "span" "button") class=(if (eq type "replication") "" "button is-transparent")}}
-    <ICon @glyph={{glyphName}} @size=24 @aria-label={{ariaLabel}} />
+    <Icon @glyph={{glyphName}} class="hs-icon-l" @aria-label={{ariaLabel}} />
     <div class="status-menu-label">
       {{label}}
     </div>
-    <ICon @glyph="chevron-down" @size=8 @aria-hidden="true" @class="has-text-white is-status-chevron"/>
+    <Chevron @direction="down" class="has-text-white is-status-chevron"/>
   {{/d.trigger}}
   {{#d.content class=(concat "status-menu-content status-menu-content-" type)}}
     {{partial partialName}}

ui/app/templates/components/string-list.hbs

@@ -40,12 +40,7 @@
           data-test-string-list-button="delete"
           {{action "removeInput" index}}
         >
-          {{i-con
+          <Icon @glyph="trash" class="hs-icon-l" />
-            size=22
-            glyph="trash-a"
-            excludeIconClass=true
-            class="is-large has-text-grey-light"
-          }}
         </button>
       {{/if}}
     </div>

ui/app/templates/components/text-file.hbs

@@ -45,7 +45,7 @@
         <label class="file-label">
           <input class="file-input" type="file" onchange={{action "pickedFile"}} data-test-text-file-input=true>
           <span class="file-cta button">
-            {{i-con glyph="upload" class="has-light-grey-text" size=16}}
+            <Icon @glyph="upload" class="has-light-grey-text" />
             Choose a file…
           </span>
           <span class="file-name has-text-grey-dark" data-test-text-file-input-label=true>
@@ -57,7 +57,7 @@
           </span>
           {{#if file.fileName}}
             <button type="button" class="file-delete-button" {{action 'clearFile'}} data-test-text-clear=true>
-              <ICon @glyph="close-circled-outline" @size=16 />
+              <Icon @glyph="cancel-circle-outline" />
             </button>
           {{/if}}
         </label>

ui/app/templates/components/toggle-button.hbs

@@ -1,5 +0,0 @@
-{{#if isOpen}}
-  {{i-con glyph='chevron-up' exludeIconClass=true}}  {{openLabel}}
-{{else}}
-  {{i-con glyph='chevron-down' exludeIconClass=true}}  {{closedLabel}}
-{{/if}}

ui/app/templates/components/toolbar-download-button.hbs

@@ -1,2 +1,2 @@
 {{@actionText}}
-<ICon @glyph="chevron-right" @size=11 />
+<Chevron @isButton={{true}} />

ui/app/templates/components/toolbar-secret-link.hbs

@@ -1,5 +1,5 @@
 <SecretLink
-  class="toolbar-link"
+  @class="toolbar-link"
   @mode={{mode}}
   @secret={{secret}}
   @replace={{replace}}
@@ -14,5 +14,5 @@
   @data-test-transit-key-actions-link={{data-test-transit-key-actions-link}}
 >
   {{yield}}
-  <ICon @glyph={{glyph}} @size=12 />
+  <Icon @glyph={{glyph}} />
 </SecretLink>

ui/app/templates/components/toolbar.hbs

@@ -1,3 +0,0 @@
-<div class="toolbar-scroller">
-  {{yield}}
-</div>

ui/app/templates/components/transit-key-action/datakey.hbs

@@ -103,7 +103,7 @@
             id="bits"
             onchange={{action (mut bits) value="target.value"}}
           >
-            {{#each (reduce-to-array 128 256 512) as |bitOption|}}
+            {{#each (array 128 256 512) as |bitOption|}}
               <option selected={{eq bits bitOption}} value={{bitOption}}>
                 <code>{{bitOption}}</code>
               </option>

ui/app/templates/components/transit-key-action/export.hbs

@@ -1,7 +1,7 @@
-<form {{action 'doSubmit' 
+<form {{action 'doSubmit'
-       (hash param=(reduce-to-array exportKeyType (if exportVersion exportKeyVersion)))
+       (hash param=(compact (array exportKeyType (if exportVersion exportKeyVersion))))
        (hash wrapTTL=wrapTTL)
-       on="submit" }} 
+       on="submit" }}
 >
   {{#if (or keys wrappedToken) }}
     <div class="box is-sideless is-fullwidth is-marginless">

ui/app/templates/components/transit-key-action/verify.hbs

@@ -6,7 +6,7 @@
         <div class="columns is-centered">
           <div class="column is-half has-text-centered">
             <p class="box is-shadowless {{if valid 'has-text-success' 'has-text-danger'}}" data-test-transit-verify="true">
-            {{i-con glyph=(if valid 'checkmark' 'close') }}
+            <Icon @glyph={{if valid "check-plain" "cancel-plain"}} />
             The input is <b>{{if valid 'valid' 'not valid'}}</b> for the given {{if signature 'signature' 'hmac'}}.
             </p>
           </div>
@@ -55,7 +55,7 @@
                    name="verification"
                    id="verification"
                    onchange={{queue
-                    (action (mut verification) value="target.value") 
+                    (action (mut verification) value="target.value")
                     (action "clearParams" (array "hmac" "signature"))
                    }}
                   >

ui/app/templates/components/transit-key-actions.hbs

@@ -10,7 +10,7 @@
         data-test-transit-key-rotate=true
       }}
       Rotate encryption key
-      <ICon @glyph="chevron-right" @size=12 />
+      <Chevron @isButton={{true}} />
     {{/confirm-action}}
   {{/if}}
 {{else}}

ui/app/templates/components/upgrade-link.hbs

@@ -1,7 +0,0 @@
-<button class="link {{linkClass}}" {{action "openOverlay"}}>
-  {{yield}}
-</button>
-
-{{#maybe-in-element modalContainer false}}
-  {{partial "partials/upgrade-overlay"}}
-{{/maybe-in-element}}

ui/app/templates/components/wizard-content.hbs

@@ -13,7 +13,7 @@
     </PopupMenu>
   {{/unless}}
   <h1 class="title is-5">
-    <ICon @glyph={{glyph}} @size="21" /> {{headerText}}
+    <Icon @glyph={{glyph}} class="hs-icon-l"/> {{headerText}}
   </h1>
   {{#if showProgress}}
     <ToolTip @verticalPosition="below" as |T|>

ui/app/templates/components/wizard-progress.hbs

@@ -5,7 +5,7 @@
         <span class="feature-progress" style={{bar.style}} {{! template-lint-disable }}></span>
       </span>
       {{#if bar.showIcon}}
-        <ICon class="feature-check {{if bar.completed 'completed-check' 'incomplete-check'}}" @glyph="check-circle-fill" @size="16" @excludeIconClass={{true}}/>
+        <Icon class="feature-check {{if bar.completed 'completed-check' 'incomplete-check'}}" @glyph="check-circle-fill" />
       {{/if}}
     </div>
   {{/each}}

ui/app/templates/components/wizard-section.hbs

@@ -1,7 +1,7 @@
 <div class="wizard-section {{class}}">
   <h2 class="title is-6">
     {{#if headerIcon}}
-      <ICon @glyph={{headerIcon}} @size=24 />
+      <Icon @glyph={{headerIcon}} class="hs-icon-l" aria-hidden="true" />
     {{/if}}
     {{headerText}}
   </h2>
@@ -14,7 +14,7 @@
   {{/if}}
   {{#if docText}}
     <DocLink @path={{docPath}}>
-      <ICon @glyph='learn' @size=16 /> {{docText}}
+      <Icon @glyph="learn" aria-hidden="true" /> {{docText}}
     </DocLink>
   {{/if}}
 </div>

ui/app/templates/components/wizard/ad-engine.hbs

@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="Active Directory"
-  @headerIcon="enable/azure"
+  @headerIcon="azure"
   @docText="Docs: Active Directory Secrets"
   @docPath="/docs/secrets/ad/index.html"
 >

ui/app/templates/components/wizard/alicloud-engine.hbs

@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="AliCloud"
-  @headerIcon="enable/alicloud"
+  @headerIcon="alicloud"
   @docText="Docs: Google Cloud Secrets"
   @docPath="/docs/secrets/alicloud/index.html"
 >

ui/app/templates/components/wizard/alicloud-method.hbs

@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="AliCloud"
-  @headerIcon="enable/alicloud"
+  @headerIcon="alicloud"
   @docText="Docs: AliCloud Authentication"
   @docPath="/docs/auth/alicloud.html"
 >

ui/app/templates/components/wizard/approle-method.hbs

@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="AppRole"
-  @headerIcon="enable/approle"
+  @headerIcon="approle"
   @docText="Docs: AppRole Authentication"
   @docPath="/docs/auth/approle.html"
 >

ui/app/templates/components/wizard/auth-details.hbs

@@ -11,10 +11,10 @@
   @headerText="Want to start again or move on?"
   @class="wizard-details"
 >
-  <button type="button"  class="button next-feature-step" {{action onReset}}>
+  <button type="button" class="button next-feature-step" {{action onReset}}>
-    Enable another Auth Method <ICon @glyph="loop"  @size=13 />
+    Enable another Auth Method <Icon @glyph="loop" class="hs-icon-button-right" />
   </button>
   <button type="button"  class="button next-feature-step" {{action onAdvance}}>
-    {{nextFeature}} <ICon @glyph="chevron-right"  @size=10 />
+    {{nextFeature}} <Chevron @isButton={{true}} />
   </button>
 </WizardSection>

ui/app/templates/components/wizard/aws-engine.hbs

@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="AWS"
-  @headerIcon="enable/aws"
+  @headerIcon="aws"
   @docText="Docs: AWS Secrets"
   @docPath="/docs/secrets/aws/index.html"
 >

ui/app/templates/components/wizard/aws-method.hbs

@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="AWS"
-  @headerIcon="enable/aws"
+  @headerIcon="aws"
   @docText="Docs: AWS Authentication"
   @docPath="/docs/auth/aws.html"
 >

ui/app/templates/components/wizard/azure-engine.hbs

@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="Azure"
-  @headerIcon="enable/azure"
+  @headerIcon="azure"
   @docText="Docs: Azure Secrets"
   @docPath="/docs/secrets/azure/index.html"
 >

ui/app/templates/components/wizard/azure-method.hbs

@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="Azure"
-  @headerIcon="enable/azure"
+  @headerIcon="azure"
   @docText="Docs: Azure Authentication"
   @docPath="/docs/auth/azure.html"
 >

ui/app/templates/components/wizard/cert-method.hbs

@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="TLS Certificates"
-  @headerIcon="enable/cert"
+  @headerIcon="cert"
   @docText="Docs: TLS Certificates Authentication"
   @docPath="/docs/auth/cert.html"
 >

ui/app/templates/components/wizard/consul-engine.hbs

@@ -1,6 +1,6 @@
 <WizardSection
   @headerText="Consul"
-  @headerIcon="enable/consul"
+  @headerIcon="consul"
   @docText="Docs: Consul Secrets"
   @docPath="/docs/secrets/consul/index.html"
 >