refactor: change icon descriptions, fix header, add card icon styles

src/views/icons/Flags.vue

@@ -13,15 +13,15 @@
             span. If you want to have a squared version flag then add the class
             flag-icon-squared as well. -->
           </CCol>
-          <template v-for="(flag, key) in displayedFlags">
+          <template v-for="(flag, flagName) in displayedFlags">
             <CCol
               class="mb-5"
               col="3"
               sm="2"
-              :key="key"
+              :key="flagName"
             >
               <CIcon :height="42" :content="flag"/>
-              <div>{{key}}</div>
+              <div>{{toKebabCase(flagName)}}</div>
             </CCol>
           </template>
         </CRow>
@@ -36,11 +36,14 @@ export default {
   name: 'Flags',
   flagSet,
   computed: {
-    // Avoid duplication caused by displaying 1x1 and 4x3 formats
-    // (adding Q to name makes icon quadratic)
     displayedFlags () {
       return this.$options.flagSet
     }
+  },
+  methods: {
+    toKebabCase (str) {
+      return str.replace(/([a-z])([A-Z0-9])/g, '$1-$2').toLowerCase()
+    }
   }
 }
 </script>