Inline symbolset option

addon/components/au-icon.hbs

@@ -1,14 +1,8 @@
-<svg
-  role="img"
-  class="au-c-icon au-c-icon--{{@icon}} {{this.alignment}} {{this.size}}"
-  aria-hidden="{{if
-    (or (eq @ariaHidden false) (eq @ariaHidden 'false'))
-    'false'
-    'true'
-  }}"
-  ...attributes
->
-  <use
-    xlink:href="{{this.iconPrefix}}@appuniversum/ember-appuniversum/appuniversum-symbolset.svg#{{@icon}}"
-  ></use>
-</svg>
+<span class="au-c-icon {{this.alignment}} {{this.size}}" ...attributes>
+  {{svg-jar
+    @icon
+    role="img"
+    class="au-c-icon__svg"
+    aria-hidden=this.ariaHiddenAttribute
+  }}
+</span>

addon/components/au-icon.js

@@ -1,15 +1,13 @@
 import Component from '@glimmer/component';
-import { getOwner } from '@ember/application';
 
-export default class AuButton extends Component {
-  get iconPrefix() {
-    const config = getOwner(this).resolveRegistration('config:environment');
-
-    return config.rootURL || '/';
+export default class AuIcon extends Component {
+  get icon() {
+    return `#${this.args.icon}`;
   }
 
   get size() {
     if (this.args.size == 'large') return 'au-c-icon--large';
+    if (this.args.size == 'medium') return 'au-c-icon--medium';
     else return '';
   }
 
@@ -18,4 +16,12 @@ export default class AuButton extends Component {
     if (this.args.alignment == 'right') return 'au-c-icon--right';
     else return '';
   }
+
+  get ariaHiddenAttribute() {
+    if (this.args.ariaHidden === false || this.args.ariaHidden === 'false') {
+      return 'false';
+    } else {
+      return 'true';
+    }
+  }
 }

addon/components/au-symbols.hbs

@@ -0,0 +1,3 @@
+<div class="au-c-symbols au-u-hidden-visually" aria-hidden="true">
+  <AuSymbols::Content />
+</div>

app/styles/ember-appuniversum/_c-icon.scss

@@ -24,9 +24,18 @@ $au-icon-size-large: var(--au-icon-size-large) !default;
   fill: currentColor;
 }
 
+.au-c-icon__svg {
+  display: block;
+  width: inherit;
+  height: inherit;
+  position: relative;
+  stroke-width: 0;
+  stroke: inherit;
+  fill: inherit;
+}
+
 /* Modifiers
   ========================================================================== */
-
 .au-c-icon--medium {
   width: $au-icon-size-medium;
   height: $au-icon-size-medium;

ember-cli-build.js

@@ -29,6 +29,10 @@ module.exports = function (defaults) {
       // https://github.com/storybookjs/ember-cli-storybook/issues/158
       enabled: false,
     },
+    svgJar: {
+      strategy: ['inline'],
+      sourceDirs: ['public/icons'],
+    },
   });
 
   /*