Implemented Icons

src/AppTopBar.vue

@@ -13,6 +13,7 @@
                 <transition name="p-input-overlay" @enter="onThemesMenuEnter" @leave="onThemesMenuLeave">
                     <ul v-if="themesMenuVisible">
                         <li class="topbar-submenu-header">THEMING</li>
+                        <li><router-link to="/icons" @click.native="hideThemesMenu()"><i className="pi pi-fw pi-search"/><span>Icons</span></router-link></li>
                         <li class="topbar-submenu-header">FREE THEMES</li>
                         <li><a href="#" @click="changeTheme($event, 'nova-light', false)"><img src="./assets/images/layouts/themeswitcher-nova-light.png" alt="Nova Light" /><span>Nova Light</span></a></li>
                         <li><a @click="changeTheme($event, 'nova-dark', false)"><img src="./assets/images/layouts/themeswitcher-nova-dark.png" alt="Nova Dark" /><span>Nova Dark</span></a></li>
@@ -62,7 +63,7 @@ export default {
                 this.darkDemoStyle = null;
             }
 
-            this.themesMenuVisible = false;
+            this.hideThemesMenu();
             event.preventDefault();
         },
         toggleThemesMenu(event) {
@@ -81,7 +82,7 @@ export default {
             if (!this.themesMenuOutsideClickListener) {
                 this.themesMenuOutsideClickListener = (event) => {
                     if (this.themesMenuVisible && this.isOutsideOfThemesMenuClicked(event)) {
-                        this.themesMenuVisible = false;
+                        this.hideThemesMenu();
                     }
                 };
                 document.addEventListener('click', this.themesMenuOutsideClickListener);
@@ -96,6 +97,9 @@ export default {
         isOutsideOfThemesMenuClicked(event) {
             return !(DomHandler.hasClass(event.target, 'themes-menu-link') || this.themesMenuElement.isSameNode(event.target) || this.themesMenuElement.contains(event.target));
         },
+        hideThemesMenu() {
+            this.themesMenuVisible = false;
+        }
     }
 }
 </script>

src/assets/styles/app.scss

@@ -118,6 +118,7 @@ body {
                 padding-bottom: 8px;
                 border-bottom: 4px solid transparent;
                 user-select: none;
+                cursor: pointer;
                 @include transition(border-color .2s);
 
                 &:hover {

src/router.js

@@ -21,6 +21,11 @@ export default new Router({
         name: 'support',
         component: () => import('./views/support/Support.vue')
     },
+    {
+        path: '/icons',
+        name: 'icons',
+        component: () => import('./views/icons/Icons.vue')
+    },
     {
         path: '/accordion',
         name: 'accordion',

src/views/icons/Icons.vue

@@ -0,0 +1,97 @@
+<template>
+    <div class="icons-page">
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Icons</h1>
+                <p>PrimeReact components internally use <a href="https://github.com/primefaces/primeicons">PrimeIcons</a> library, the official icons suite from <a href="https://www.primetek.com.tr">PrimeTek</a>.</p>
+            </div>
+        </div>
+
+        <div class="content-section documentation">
+            <h3 style="margin-top: 0">Download</h3>
+            <p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
+
+<CodeHighlight lang="js">
+npm install primeicons --save
+</CodeHighlight>
+
+            <h3>Getting Started</h3>
+            <p>PrimeIcons use the <strong>pi pi-&#123;icon&#125;</strong> syntax such as <strong>pi pi-check</strong>.
+            A standalone icon can be displayed using an element such as <i>i</i> or <i>span</i></p>
+
+<CodeHighlight>
+&lt;i class="pi pi-check"&gt;&lt;/i&gt;
+&lt;i class="pi pi-times"&gt;&lt;/i&gt;
+</CodeHighlight>
+
+<i class="pi pi-check"></i>
+<i class="pi pi-times"></i>
+
+            <h3>Size</h3>
+            <p>Size of the icons can easily be changed using font-size property.</p>
+
+<CodeHighlight>
+&lt;i class="pi pi-check"&gt;&lt;/i&gt;
+</CodeHighlight>
+
+            <i class="pi pi-check"></i>
+
+<CodeHighlight>
+&lt;i class="pi pi-check" style="fontSize: 3em"&gt;&lt;/i&gt;
+</CodeHighlight>
+
+            <i class="pi pi-check" style="fontSize: 3em"></i>
+
+            <h3>Spinning Animation</h3>
+            <p>Special pi-spin class applies infinite rotate to an icon.</p>
+<CodeHighlight>
+&lt;i class="pi pi-spin pi-spinner" style="fontSizi class="pi pi-spin pi-spinner" style="fontSiz
+</CodeHighlight>
+
+            <i class="pi pi-spin pi-spinner" style="fontSize: 3em"></i>
+
+            <h3>List of Icons</h3>
+            <p>Here is the current list of PrimeIcons, more icons will be added periodically. You may also <a href="https://github.com/primefaces/primeicons/issues">request new icons</a> at the issue tracker.</p>
+
+            <InputText v-model="filter" class="icon-filter" placeholder="Search an icon" />
+            
+            <div class="p-grid icons-list">
+                <div class="p-col-12 p-md-2" v-for="icon of filteredIcons" :key="icon.properties.name">
+                    <i :class="'pi pi-' + icon.properties.name"></i>
+                    <div>pi-{{icon.properties.name}}</div>
+                </div>
+            </div>
+        </div>
+    </div></template>
+
+<script>
+import axios from 'axios';
+
+export default {
+    data() {
+        return {
+            icons: null,
+            filter: null
+        }
+    },
+    mounted() {
+        axios.get('demo/data/icons.json').then(res => this.icons = res.data.icons);
+    },
+    computed: {
+        filteredIcons() {
+            if (this.filter)
+                return this.icons.filter(icon => icon.properties.name.indexOf(this.filter.toLowerCase()) > -1);
+            else
+                return this.icons; 
+        }
+    }
+}
+</script>
+
+<style lang="css" scoped>
+.icon-filter {
+    width: 100%; 
+    padding: 1em;
+    margin: 16px 0 26px 0;
+}
+</style>