InputIcon page added

assets/menu/menu.json

@@ -95,8 +95,11 @@
                         },
                         {
                             "name": "FloatLabel",
-                            "to": "/floatlabel",
+                            "to": "/floatlabel"
-                            "badge": "NEW"
+                        },
+                        {
+                            "name": "InputIcon",
+                            "to": "/inputicon"
                         },
                         {
                             "name": "InputGroup",

components/lib/iconfield/IconField.d.ts

@@ -1,13 +1,13 @@
 /**
  *
- * IconField is used to select a boolean value.
+ * IconField wraps an input and an icon.
  *
  * [Live Demo](https://www.primevue.org/inputtext/)
  *
  * @module iconfield
  *
  */
-import { InputHTMLAttributes, VNode } from 'vue';
+import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';

components/lib/inputicon/InputIcon.d.ts

@@ -1,6 +1,6 @@
 /**
  *
- * InputIcon displays text, icon, buttons and other content can be grouped next to an input.
+ * InputIcon displays an icon.
  *
  * [Live Demo](https://www.primevue.org/inputgroup/)
  *

doc/inputicon/AccessibilityDoc.vue

@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>InputIcon and IconField does not require any roles and attributes.</p>
+
+        <h3>Keyboard Support</h3>
+        <p>Components does not include any interactive elements.</p>
+    </DocSectionText>
+</template>

doc/inputicon/ImportDoc.vue

@@ -0,0 +1,19 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import InputIcon from 'primevue/inputicon';
+import IconField from 'primevue/iconfield';
+`
+            }
+        };
+    }
+};
+</script>

doc/inputicon/theming/StyledDoc.vue

@@ -0,0 +1,25 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>p-input-icon-right</td>
+                        <td>Right input icon element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-input-icon-left</td>
+                        <td>Left input icon element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>

doc/inputicon/theming/index.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>InputIcon Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'theming.styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>

pages/inputicon/index.vue

@@ -0,0 +1,35 @@
+<template>
+    <DocComponent title="Vue Input Icon" header="Input Icon" description="InputIcon displays an icon." :componentDocs="docs" :apiDocs="['InputIcon', 'IconField']" :themingDocs="themingDoc" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/inputicon/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/inputicon/BasicDoc.vue';
+import ImportDoc from '@/doc/inputicon/ImportDoc.vue';
+import ThemingDoc from '@/doc/inputicon/theming/index.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            themingDoc: ThemingDoc
+        };
+    }
+};
+</script>

pages/inputtext/index.vue

@@ -1,13 +1,5 @@
 <template>
-    <DocComponent
+    <DocComponent title="Vue Input Component" header="InputText" description="InputText is an extension to standard input element with theming." :componentDocs="docs" :apiDocs="['InputText']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
-        title="Vue Input Component"
-        header="InputText"
-        description="InputText is an extension to standard input element with theming."
-        :componentDocs="docs"
-        :apiDocs="['InputText', 'FloatLabel', 'InputIcon', 'IconField']"
-        :ptTabComponent="ptComponent"
-        :themingDocs="themingDoc"
-    />
 </template>
 
 <script>
@@ -17,7 +9,6 @@ import DisabledDoc from '@/doc/inputtext/DisabledDoc.vue';
 import FilledDoc from '@/doc/inputtext/FilledDoc.vue';
 import FloatLabelDoc from '@/doc/inputtext/FloatLabelDoc.vue';
 import HelpTextDoc from '@/doc/inputtext/HelpTextDoc.vue';
-import IconsDoc from '@/doc/inputtext/IconsDoc.vue';
 import ImportDoc from '@/doc/inputtext/ImportDoc.vue';
 import InvalidDoc from '@/doc/inputtext/InvalidDoc.vue';
 import SizesDoc from '@/doc/inputtext/SizesDoc.vue';
@@ -38,11 +29,6 @@ export default {
                     label: 'Basic',
                     component: BasicDoc
                 },
-                {
-                    id: 'icons',
-                    label: 'Icons',
-                    component: IconsDoc
-                },
                 {
                     id: 'sizes',
                     label: 'Sizes',