DEV: Sort styleguide icons alphabetically and fix render on refresh (#14463)

Co-authored-by: Jarek Radosz <jradosz@gmail.com>

plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.js.es6

@@ -1,4 +1,5 @@
 import { afterRender } from "discourse-common/utils/decorators";
+import { later } from "@ember/runloop";
 
 export default Ember.Component.extend({
   tagName: "section",
@@ -13,8 +14,12 @@ export default Ember.Component.extend({
   @afterRender
   setIconIds() {
     let symbols = document.querySelectorAll("#svg-sprites symbol");
-    let ids = Array.from(symbols).mapBy("id");
-
-    this.set("iconIds", ids);
+    if (symbols.length > 0) {
+      let ids = Array.from(symbols).mapBy("id");
+      this.set("iconIds", ids.sort());
+    } else {
+      // Let's try again a short time later if there are no svgs loaded yet
+      later(this, this.setIconIds, 1500);
+    }
   },
 });