feat: alternate navigation icon set

client/components/admin/admin-navigation.vue

@@ -78,7 +78,15 @@
                     v-model='current.icon'
                     hide-details
                   )
-                  .caption.pt-2.pl-5 Refer to the #[a(href='https://material.io/tools/icons/?style=baseline', target='_blank') Material Design Icons Reference] for the list of all possible values.
+                  .caption.pt-3.pl-5 The default icon set is #[strong Material Icons]. In order to use another icon set, you must first select it in the Theme administration section.
+                  .caption.pt-3.pl-5 #[strong Material Icons] #[em (default)]
+                  .caption.pl-5 Refer to the #[a(href='https://material.io/tools/icons/?style=baseline', target='_blank') Material Icons Reference] for the list of all possible values.
+                  .caption.pt-3.pl-5: strong Material Design Icons
+                  .caption.pl-5 Refer to the #[a(href='https://cdn.materialdesignicons.com/3.7.95/', target='_blank') Material Design Icons Reference] for the list of all possible values. You must prefix all values with #[code mdi-], e.g. #[code mdi-home]
+                  .caption.pt-3.pl-5: strong Font Awesome 5
+                  .caption.pl-5 Refer to the #[a(href='https://fontawesome.com/icons?d=gallery&m=free', target='_blank') Font Awesome 5 Reference] for the list of all possible values. You must prefix all values with #[code fas fa-], e.g. #[code fas fa-home]
+                  .caption.pt-3.pl-5: strong Font Awesome 4
+                  .caption.pl-5 Refer to the #[a(href='https://fontawesome.com/v4.7.0/icons/', target='_blank') Font Awesome 4 Reference] for the list of all possible values. You must prefix all values with #[code fa fa-], e.g. #[code fa fa-home]
                   v-select.mt-4(
                     outline
                     :label='$t("navigation.targetType")'
@@ -96,7 +104,8 @@
                   v-btn(
                     v-else-if='current.targetType === "page"'
                     color='indigo'
-                    dark
+                    :dark='false'
+                    disabled
                     @click='selectPage'
                     )
                     v-icon(left) search
@@ -161,9 +170,10 @@ export default {
   computed: {
     navTypes() {
       return [
-        { text: this.$t('navigation.navType.external'), value: 'external' },
+        // { text: this.$t('navigation.navType.external'), value: 'external' },
         { text: this.$t('navigation.navType.home'), value: 'home' },
-        { text: this.$t('navigation.navType.page'), value: 'page' }
+        { text: 'Internal Path / External Link', value: 'external' },
+        // { text: this.$t('navigation.navType.page'), value: 'page' }
         // { text: this.$t('navigation.navType.searchQuery'), value: 'search' }
       ]
     }

client/components/admin/admin-theme.vue

@@ -35,6 +35,16 @@
                       v-list-tile-content
                         v-list-tile-title(v-html='data.item.text')
                         v-list-tile-sub-title(v-html='data.item.author')
+                  v-select.mt-3(
+                    :items='iconsets'
+                    outline
+                    background-color='grey lighten-2'
+                    prepend-icon='pets'
+                    v-model='config.iconset'
+                    :label='$t(`admin:theme.iconset`)'
+                    persistent-hint
+                    :hint='$t(`admin:theme.iconsetHint`)'
+                    )
                   v-divider.mt-3
                   v-switch(
                     v-model='darkMode'
@@ -43,6 +53,7 @@
                     persistent-hint
                     :hint='$t(`admin:theme.darkModeHint`)'
                     )
+
               v-card.wiki-form.mt-3.animated.fadeInUp.wait-p2s
                 v-toolbar(color='primary', dark, dense, flat)
                   v-toolbar-title
@@ -102,9 +113,16 @@ export default {
       themes: [
         { text: 'Default', author: 'requarks.io', value: 'default' }
       ],
+      iconsets: [
+        { text: 'Material Icons (default)', value: 'md' },
+        { text: 'Material Design Icons', value: 'mdi' },
+        { text: 'Font Awesome 5', value: 'fa' },
+        { text: 'Font Awesome 4', value: 'fa4' },
+      ],
       config: {
         theme: 'default',
         darkMode: false,
+        iconset: '',
         injectCSS: '',
         injectHead: '',
         injectBody: ''
@@ -130,6 +148,7 @@ export default {
           mutation: themeSaveMutation,
           variables: {
             theme: this.config.theme,
+            iconset: this.config.iconset,
             darkMode: this.darkMode,
             injectCSS: this.config.injectCSS,
             injectHead: this.config.injectHead,

client/graph/admin/theme/theme-mutation-save.gql

-mutation($theme: String!, $darkMode: Boolean!, $injectCSS: String, $injectHead: String, $injectBody: String) {
+mutation($theme: String!, $iconset: String!, $darkMode: Boolean!, $injectCSS: String, $injectHead: String, $injectBody: String) {
   theming {
-    setConfig(theme: $theme, darkMode: $darkMode, injectCSS: $injectCSS, injectHead: $injectHead, injectBody: $injectBody) {
+    setConfig(theme: $theme, iconset: $iconset, darkMode: $darkMode, injectCSS: $injectCSS, injectHead: $injectHead, injectBody: $injectBody) {
       responseResult {
         succeeded
         errorCode

client/graph/admin/theme/theme-query-config.gql

@@ -2,6 +2,7 @@ query {
   theming {
     config {
       theme
+      iconset
       darkMode
       injectCSS
       injectHead

dev/templates/legacy.pug

@@ -27,6 +27,26 @@ html
       link(rel='icon', type='image/png', sizes=favsize + 'x' + favsize, href='/favicons/favicon-' + favsize + 'x' + favsize + '.png')
     link(rel='manifest', href='/manifest.json')
 
+    //- Icon Set
+    if config.theming.iconset === 'mdi'
+      link(
+        type='text/css'
+        rel='stylesheet'
+        href='https://cdn.materialdesignicons.com/3.7.95/css/materialdesignicons.min.css'
+        )
+    else if config.theming.iconset === 'fa'
+      link(
+        type='text/css'
+        rel='stylesheet'
+        href='https://use.fontawesome.com/releases/v5.0.13/css/all.css'
+        )
+    else if config.theming.iconset === 'fa4'
+      link(
+        type='text/css'
+        rel='stylesheet'
+        href='https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css'
+        )
+
     //- CSS
     <% for (var index in htmlWebpackPlugin.files.css) { %>
       <% if (htmlWebpackPlugin.files.cssIntegrity) { %>

dev/templates/master.pug

@@ -31,6 +31,26 @@ html
     script.
       var siteConfig = !{JSON.stringify(siteConfig)}; var siteLangs = !{JSON.stringify(langs)}
 
+    //- Icon Set
+    if config.theming.iconset === 'mdi'
+      link(
+        type='text/css'
+        rel='stylesheet'
+        href='https://cdn.materialdesignicons.com/3.7.95/css/materialdesignicons.min.css'
+        )
+    else if config.theming.iconset === 'fa'
+      link(
+        type='text/css'
+        rel='stylesheet'
+        href='https://use.fontawesome.com/releases/v5.0.13/css/all.css'
+        )
+    else if config.theming.iconset === 'fa4'
+      link(
+        type='text/css'
+        rel='stylesheet'
+        href='https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css'
+        )
+
     //- CSS
     <% for (var index in htmlWebpackPlugin.files.css) { %>
       <% if (htmlWebpackPlugin.files.cssIntegrity) { %>

server/app/data.yml

@@ -40,6 +40,7 @@ defaults:
     title: Wiki.js
     theming:
       theme: 'default'
+      iconset: 'md'
       darkMode: false
     flags:
       ldapdebug: false

server/graph/resolvers/theming.js

@@ -20,7 +20,7 @@ module.exports = {
       }]
     },
     async config(obj, args, context, info) {
-      return _.pick(WIKI.config.theming, ['theme', 'darkMode', 'injectCSS', 'injectHead', 'injectBody'])
+      return _.pick(WIKI.config.theming, ['theme', 'iconset', 'darkMode', 'injectCSS', 'injectHead', 'injectBody'])
     }
   },
   ThemingMutation: {
@@ -35,6 +35,7 @@ module.exports = {
         WIKI.config.theming = {
           ...WIKI.config.theming,
           theme: args.theme,
+          iconset: args.iconset,
           darkMode: args.darkMode,
           injectCSS: args.injectCSS || '',
           injectHead: args.injectHead || '',

server/graph/schemas/theming.graphql

@@ -26,6 +26,7 @@ type ThemingQuery {
 type ThemingMutation {
   setConfig(
     theme: String!
+    iconset: String!
     darkMode: Boolean!
     injectCSS: String
     injectHead: String
@@ -39,6 +40,7 @@ type ThemingMutation {
 
 type ThemingConfig {
   theme: String!
+  iconset: String!
   darkMode: Boolean!
   injectCSS: String
   injectHead: String