comand-component-library 3.3.4 → 3.3.6

package/src/components/CmdListOfLinks.vue

@@ -16,7 +16,9 @@
                    :target="link.target"
                    @click="executeLink(link, $event)"
                    :title="link.tooltip && link.tooltip !== undefined ? link.tooltip : undefined">
-                    <span v-if="link.iconClass" :class="link.iconClass"></span>
+                    <!-- begin CmdIcon -->
+                    <CmdIcon v-if="link.iconClass" :iconClass="link.iconClass" :type="link.iconType" />
+                    <!-- end CmdIcon -->
                     <span v-if="link.text">{{ link.text }}</span>
                 </a>
                 <!-- end use href --->
@@ -25,7 +27,9 @@
                 <router-link v-else-if="link.type === 'router'"
                              :to="getRoute(link)"
                              :title="link.tooltip">
-                    <span v-if="link.iconClass" :class="link.iconClass"></span>
+                    <!-- begin CmdIcon -->
+                    <CmdIcon v-if="link.iconClass" :iconClass="link.iconClass" :type="link.iconType" />
+                    <!-- end CmdIcon -->
                     <span v-if="link.text">{{ link.text }}</span>
                 </router-link>
                 <!-- end use router-link -->
@@ -42,11 +46,13 @@ import {openFancyBox} from "./CmdFancyBox.vue"
 
 // import components
 import CmdHeadline from "./CmdHeadline"
+import CmdIcon from "./CmdIcon"
 
 export default {
     name: "CmdListOfLinks",
     components: {
-        CmdHeadline
+        CmdHeadline,
+        CmdIcon
     },
     props: {
         /**

package/src/components/CmdListOfRequirements.vue

@@ -1,22 +1,24 @@
 <template>
     <div class="cmd-list-of-requirements">
-        <!-- begin cmd-custom-headline -->
+        <!-- begin CmdHeadline -->
         <CmdHeadline v-if="showHeadline" :headline-level="cmdHeadline.headlineLevel">
             {{ headlineRequirements }}<template v-if="labelText"><br/><em>{{ labelText }}</em></template>
         </CmdHeadline>
-        <!-- end cmd-custom-headline -->
+        <!-- end CmdHeadline -->
 
         <!-- begin list of requirements -->
         <dl>
             <template v-for="(requirement, index) in inputRequirements" :key="index">
                 <dt aria-live="assertive" :class="requirement.valid(inputModelValue, inputAttributes) ? 'success' : 'error'">{{ requirement.message }}:</dt>
                 <dd :class="requirement.valid(inputModelValue, inputAttributes) ? 'success' : 'error'">
-                    <span
+                    <!-- begin CmdIcon -->
+                    <CmdIcon
                         aria-live="assertive"
-                        :class="requirement.valid(inputModelValue, inputAttributes) ? iconSuccess.iconClass : iconError.iconClass"
+                        :iconClass="requirement.valid(inputModelValue, inputAttributes) ? iconSuccess.iconClass : iconError.iconClass"
+                        :type="requirement.valid(inputModelValue, inputAttributes) ? iconSuccess.iconType : iconError.iconType"
                         :title="requirement.valid(inputModelValue, inputAttributes) ? iconSuccess.tooltip : iconError.tooltip"
-                    >
-                    </span>
+                    />
+                    <!-- end CmdIcon -->
                 </dd>
             </template>
         </dl>
@@ -31,10 +33,13 @@
                 :target="helplink.target"
                 @click.prevent
             >
-                <span v-if="helplink.icon?.iconClass"
-                      :class="helplink.icon?.iconClass"
-                      :title="helplink.icon?.tooltip">
-                </span>
+                <!-- begin CmdIcon -->
+                <CmdIcon
+                    v-if="helplink.icon?.iconClass"
+                    :class="helplink.icon?.iconClass"
+                    :title="helplink.icon?.tooltip"
+                />
+                <!-- end CmdIcon -->
                 <span v-if="helplink.text">
                     {{ helplink.text }}
                 </span>
@@ -47,6 +52,7 @@
 <script>
 // import components
 import CmdHeadline from "./CmdHeadline"
+import CmdIcon from "./CmdIcon"
 
 // import mixins
 import I18n from "../mixins/I18n"
@@ -55,7 +61,8 @@ import DefaultMessageProperties from "../mixins/CmdListOfRequirements/DefaultMes
 export default {
     name: "CmdListOfRequirements",
     components: {
-        CmdHeadline
+        CmdHeadline,
+        CmdIcon
     },
     mixins: [
         I18n,

package/src/components/CmdLoginForm.vue

@@ -47,30 +47,38 @@
             <template v-if="options.forgotPassword || options.createAccount">
                 <!-- begin link for 'forgot password' -->
                 <a v-if="options.forgotPassword" href="#" @click.prevent="sendLogin = true">
-                    <span v-if="options.forgotPassword.icon?.show && options.forgotPassword.icon?.iconClass"
-                          :class="options.forgotPassword.icon.iconClass"
-                          :title="options.forgotPassword.icon.tooltip">
-                    </span>
+                    <!-- begin CmdIcon -->
+                    <CmdIcon v-if="options.forgotPassword.icon?.show && options.forgotPassword.icon?.iconClass"
+                          :iconClass="options.forgotPassword.icon.iconClass"
+                          :type="options.forgotPassword.icon.iconType"
+                          :title="options.forgotPassword.icon.tooltip"
+                    />
+                    <!-- end CmdIcon -->
                     <span v-if="options.forgotPassword.text">{{ options.forgotPassword.text }}</span>
                 </a>
                 <!-- end link for 'forgot password' -->
 
                 <!-- begin link-type 'href' for 'create account' -->
                 <a v-if="options.createAccount && options.createAccount.linkType === 'href'" :href="options.createAccount.path">
-                    <span v-if="options.createAccount.icon?.show && options.createAccount.icon?.iconClass"
-                          :class="options.createAccount.icon.iconClass"
-                          :title="options.forgotPassword.icon.tooltip">
-                    </span>
+                    <!-- begin CmdIcon -->
+                    <CmdIcon v-if="options.createAccount.icon?.show && options.createAccount.icon?.iconClass"
+                          :iconClass="options.createAccount.icon.iconClass"
+                          :type="options.createAccount.icon.iconType"
+                          :title="options.createAccount.icon.tooltip" />
+                    <!-- end CmdIcon -->
                     <span v-if="options.createAccount.text">{{ options.createAccount.text }}</span>
                 </a>
                 <!-- end link-type 'href' for 'create account' -->
 
                 <!-- begin link-type 'router' for 'create account' -->
                 <router-link v-else-if="options.createAccount && options.createAccount.linkType === 'router'" :to="options.createAccount.path">
-                    <span v-if="options.createAccount.icon && options.createAccount.icon.show && options.createAccount.icon.iconClass"
+                    <!-- begin CmdIcon -->
+                    <CmdIcon v-if="options.createAccount.icon && options.createAccount.icon.show && options.createAccount.icon.iconClass"
                           :class="options.createAccount.icon.iconClass"
-                          :title="options.forgotPassword.icon.tooltip">
-                    </span>
+                          :type="options.createAccount.icon.iconType"
+                          :title="options.createAccount.icon.tooltip" />
+                    />
+                    <!-- end CmdIcon -->
                     <span v-if="options.createAccount.text">{{ options.createAccount.text }}</span>
                 </router-link>
                 <!-- end link-type 'router' for 'create account' -->
@@ -84,11 +92,14 @@
                 @click="onClick"
                 :disabled="buttonLoginDisabled"
             >
-                  <span
-                      v-if="buttons.login.icon.iconClass"
-                      :class="buttons.login.icon.iconClass"
-                      :title="buttons.login.icon.tooltip"
-                  ></span>
+                <!-- begin CmdIcon -->
+                <CmdIcon
+                    v-if="buttons.login.icon.iconClass"
+                    :iconClass="buttons.login.icon.iconClass"
+                    :type="buttons.login.icon.iconType"
+                    :title="buttons.login.icon.tooltip"
+                />
+                <!-- end CmdIcon -->
                 <span v-if="buttons.login.text">{{ buttons.login.text }}</span>
             </button>
             <!-- begin link-type 'button' -->
@@ -123,10 +134,14 @@
 
         <div class="option-wrapper flex-container">
             <a href="#" @click.prevent="sendLogin = false">
-                <span v-if="options.backToLoginForm && options.backToLoginForm.icon && options.backToLoginForm.icon.show && options.backToLoginForm.icon.iconClass"
-                :class="options.backToLoginForm.icon.iconClass"
-                :title="options.backToLoginForm.tooltip">
-                </span>
+                <!-- begin CmdIcon -->
+                <CmdIcon
+                    v-if="options.backToLoginForm && options.backToLoginForm.icon && options.backToLoginForm.icon.show && options.backToLoginForm.icon.iconClass"
+                    :iconClass="options.backToLoginForm.icon.iconClass"
+                    :type="options.backToLoginForm.icon.iconType"
+                    :title="options.backToLoginForm.icon.tooltip"
+                />
+                <!-- end CmdIcon -->
                 <span v-if="options.backToLoginForm.text">
                   {{ options.backToLoginForm.text }}
                 </span>
@@ -139,11 +154,13 @@
                 :class="['button', { primary: buttons.sendLogin.primary }]"
                 :disabled="buttonSendLoginDisabled"
             >
-                  <span
-                      v-if="buttons.sendLogin.icon?.iconClass"
-                      :class="buttons.sendLogin.icon?.iconClass"
-                      :title="buttons.sendLogin.icon?.tooltip"
-                  ></span>
+                <!-- begin CmdIcon -->
+                <CmdIcon
+                    v-if="buttons.sendLogin.icon?.iconClass"
+                    :iconClass="buttons.sendLogin.icon?.iconClass"
+                    :title="buttons.sendLogin.icon?.tooltip"
+                />
+                <!-- end CmdIcon -->
                 <span v-if="buttons.sendLogin.text">{{ buttons.sendLogin.text }}</span>
             </button>
             <!-- end link-type 'button' -->
@@ -157,8 +174,9 @@
 import {getRoute} from "../utilities.js"
 
 // import components
-import CmdHeadline from "./CmdHeadline"
 import CmdFormElement from "./CmdFormElement"
+import CmdHeadline from "./CmdHeadline"
+import CmdIcon from "./CmdIcon"
 
 export default {
     name: "CmdLoginForm",
@@ -172,8 +190,9 @@ export default {
         }
     },
     components: {
+        CmdFormElement,
         CmdHeadline,
-        CmdFormElement
+        CmdIcon
     },
     props: {
         /**

package/src/components/CmdMainNavigation.vue

@@ -14,7 +14,9 @@
             <ul :class="{'stretch-items' : stretchMainItems}">
                 <li class="close-nav" v-if="showOffcanvas">
                     <a href="#" id="close-offcanvas" role="button" @click.prevent="closeOffcanvasNavigation">
-                        <span v-if="closeOffcanvas.iconClass" :class="closeOffcanvas.iconClass"></span>
+                        <!-- begin CmdIcon -->
+                        <CmdIcon v-if="closeOffcanvas.iconClass" :iconClass="closeOffcanvas.iconClass" :type="closeOffcanvas.iconType" />
+                        <!-- end CmdIcon -->
                         <span :class="{'hidden': !closeOffcanvas.showText}">{{ closeOffcanvas.text }}</span>
                     </a>
                 </li>
@@ -30,7 +32,9 @@
                        @mouseover="closeAllSubentries()"
                        @focus="closeAllSubentries()"
                     >
-                        <span v-if="navigationEntry.iconClass" :class="navigationEntry.iconClass"></span>
+                        <!-- begin CmdIcon -->
+                        <CmdIcon v-if="navigationEntry.iconClass" :iconClass="navigationEntry.iconClass" :type="navigationEntry.iconType" />
+                        <!-- end CmdIcon -->
                         <span v-if="navigationEntry.text">{{ navigationEntry.text }}</span>
                         <span v-if="navigationEntry?.subentries?.length"
                               :class="['subentry-icon', subentriesIconClass]"
@@ -44,7 +48,9 @@
                         :to="getRoute(navigationEntry)"
                         :title="navigationEntry.tooltip"
                     >
-                        <span v-if="navigationEntry.iconClass" :class="navigationEntry.iconClass"></span>
+                        <!-- begin CmdIcon -->
+                        <CmdIcon v-if="navigationEntry.iconClass" :iconClass="navigationEntry.iconClass" :type="navigationEntry.iconType" />
+                        <!-- end CmdIcon -->
                         <span v-if="navigationEntry.text">{{ navigationEntry.text }}</span>
                         <span v-if="navigationEntry.subentries && navigationEntry.subentries.length > 0"
                               :class="['subentry-icon', subentriesIconClass]"></span>
@@ -63,7 +69,9 @@
                                @mouseover="closeAllSubentries(1)"
                                @focus="closeAllSubentries(1)"
                             >
-                                <span v-if="navigationSubEntry.iconClass" :class="navigationSubEntry.iconClass"></span>
+                                <!-- begin CmdIcon -->
+                                <CmdIcon v-if="navigationSubEntry.iconClass" :iconClass="navigationSubEntry.iconClass" :type="navigationSubEntry.iconType" />
+                                <!-- end CmdIcon -->
                                 <span v-if="navigationSubEntry.text">{{ navigationSubEntry.text }}</span>
                                 <span v-if="navigationSubEntry.subentries && navigationSubEntry.subentries.length > 0"
                                       :class="['subentry-icon', subentriesIconClass]"
@@ -77,7 +85,9 @@
                                 :to="getRoute(navigationSubEntry)"
                                 :title="navigationSubEntry.tooltip"
                             >
-                                <span v-if="navigationSubEntry.iconClass" :class="navigationSubEntry.iconClass"></span>
+                                <!-- begin CmdIcon -->
+                                <CmdIcon v-if="navigationSubEntry.iconClass" :iconClass="navigationSubEntry.iconClass" :type="navigationSubEntry.iconType" />
+                                <!-- end CmdIcon -->
                                 <span v-if="navigationSubEntry.text">{{ navigationSubEntry.text }}</span>
                                 <span v-if="navigationSubEntry.subentries && navigationSubEntry.subentries.length > 0"
                                       :class="['subentry-icon', subentriesIconClass]"></span>
@@ -95,7 +105,9 @@
                                        :target="navigationSubSubEntry.target"
                                        @click="executeLink($event, navigationSubSubEntry)"
                                     >
-                                        <span v-if="navigationSubSubEntry.iconClass" :class="navigationSubSubEntry.iconClass"></span>
+                                        <!-- begin CmdIcon -->
+                                        <CmdIcon v-if="navigationSubSubEntry.iconClass" :iconClass="navigationSubSubEntry.iconClass" :type="navigationSubSubEntry.iconType" />
+                                        <!-- end CmdIcon -->
                                         <span v-if="navigationSubSubEntry.text">{{ navigationSubSubEntry.text }}</span>
                                         <span v-if="navigationSubSubEntry.subentries && navigationSubSubEntry.subentries.length > 0"
                                               :class="['subentry-icon', subentriesIconClass]"
@@ -107,7 +119,9 @@
                                     <router-link v-if="navigationEntry.type === 'router'"
                                                  :to="getRoute(navigationSubSubEntry)"
                                                  :target="navigationSubSubEntry.target">
-                                        <span v-if="navigationSubSubEntry.iconClass" :class="navigationSubSubEntry.iconClass"></span>
+                                        <!-- begin CmdIcon -->
+                                        <CmdIcon v-if="navigationSubSubEntry.iconClass" :iconClass="navigationSubSubEntry.iconClass" :type="navigationSubSubEntry.iconType" />
+                                        <!-- end CmdIcon -->
                                         <span v-if="navigationSubSubEntry.text">{{ navigationSubSubEntry.text }}</span>
                                         <span v-if="navigationSubSubEntry.subentries && navigationSubSubEntry.subentries.length > 0"
                                               :class="['subentry-icon', subentriesIconClass]"></span>
@@ -126,7 +140,9 @@
 
         <!-- begin offCanvasButton -->
         <a v-if="persistOnMobile === false" href="#" class="button" id="toggle-offcanvas" @click.prevent="toggleOffcanvasNavigation">
-            <span :class="buttonOffcanvas.iconClass"></span>
+            <!-- begin CmdIcon -->
+            <CmdIcon :iconClass="buttonOffcanvas.iconClass" :type="buttonOffcanvas.iconType" />
+            <!-- end CmdIcon -->
             <span :class="{'hidden' : !buttonOffcanvas.showText}">{{ buttonOffcanvas.text }}</span>
         </a>
         <!-- end offCanvasButton -->
@@ -137,8 +153,14 @@
 // import functions
 import {getRoute} from "../utilities.js"
 
+// import components
+import CmdIcon from "./CmdIcon"
+
 export default {
     name: "CmdMainNavigation",
+    components: {
+        CmdIcon
+    },
     data() {
         return {
             showOffcanvas: false,
@@ -286,8 +308,6 @@ export default {
 @import '../assets/styles/variables';
 
 .cmd-main-navigation {
-    grid-area: main-navigation;
-
     &.hide-sub-navigation {
         ul {
             ul {

package/src/components/CmdMultistepFormProgressBar.vue

@@ -7,7 +7,9 @@
                :title="step.tooltip"
             >
                 <span  v-if="showStepNumber" class="number">{{ index + 1 }}</span>
-                <span v-if="step.iconClass" :class="step.iconClass"></span>
+                <!-- begin CmdIcon -->
+                <CmdIcon v-if="step.iconClass" :iconClass="step.iconClass" :type="step.iconType" />
+                <!-- end CmdIcon -->
                 <span v-if="step.text">{{ step.text }}</span>
                 <span :class="separatorIconClass"></span>
             </a>
@@ -20,7 +22,9 @@
                 :title="step.tooltip"
             >
                 <span v-if="showStepNumber" class="number">{{ index + 1 }}</span>
-                <span v-if="step.iconClass" :class="step.iconClass"></span>
+                <!-- begin CmdIcon -->
+                <CmdIcon v-if="step.iconClass" :iconClass="step.iconClass" :type="step.iconType" />
+                <!-- end CmdIcon -->
                 <span v-if="step.text">{{ step.text }}</span>
                 <span :class="separatorIconClass"></span>
             </router-link>
@@ -37,7 +41,9 @@
                 @click.stop.prevent="clickedStep($event, index)"
             >
                 <span v-if="showStepNumber" class="number">{{ index + 1 }}</span>
-                <span v-if="step.iconClass" :class="step.iconClass"></span>
+                <!-- begin CmdIcon -->
+                <CmdIcon v-if="step.iconClass" :iconClass="step.iconClass" :type="step.iconType" />
+                <!-- end CmdIcon -->
                 <span v-if="step.text">{{ step.text }}</span>
                 <span :class="separatorIconClass"></span>
             </button>
@@ -50,8 +56,14 @@
 // import functions
 import {getRoute} from "../utilities.js"
 
+// import components
+import CmdIcon from "./CmdIcon"
+
 export default {
     name: 'CmdMultistepFormProgressBar',
+    components: {
+        CmdIcon
+    },
     data() {
         return {
             activeLink: 0

package/src/components/CmdPager.vue

@@ -26,8 +26,10 @@
             <!-- begin button to next page -->
             <a class="page-change" :class="{'disabled': currentPage === numberOfPages, 'button': showLinksAsButtons}"
                @click.prevent="nextPage">
-                <span v-if="nextButton.buttonText">{{ nextButton.buttonText }}</span><span
-                :class="nextButton.iconClass"></span>
+                <span v-if="nextButton.buttonText">{{ nextButton.buttonText }}</span>
+                <!-- begin CmdIcon -->
+                <CmdIcon :iconClass="nextButton.iconClass" :type="nextButton.iconType" />
+                <!-- end CmdIcon -->
             </a>
             <!-- end button to next page -->
         </div>
@@ -35,8 +37,14 @@
 </template>
 
 <script>
+// import components
+import CmdIcon from "./CmdIcon"
+
 export default {
     name: "CmdPager",
+    components: {
+        CmdIcon
+    },
     emits: ['click'],
     data() {
         return {

package/src/components/CmdShareButtons.vue

@@ -17,9 +17,13 @@
                @click="preventOnDisabled"
                target="_blank"
                :title="tooltip(shareButton.tooltip)">
-                <span v-if="shareButton.iconClass && shareButton.iconPosition !== 'right'" :class="shareButton.iconClass"></span>
+                <!-- begin CmdIcon -->
+                <CmdIcon v-if="shareButton.iconClass && shareButton.iconPosition !== 'right'" :iconClass="shareButton.iconClass" :type="shareButton.iconType" />
+                <!-- end CmdIcon -->
                 <span v-if="shareButton.linkText">{{ shareButton.linkText }}</span>
-                <span v-if="shareButton.iconClass && shareButton.iconPosition === 'right'" :class="shareButton.iconClass"></span>
+                <!-- begin CmdIcon -->
+                <CmdIcon v-if="shareButton.iconClass && shareButton.iconPosition === 'right'" :iconClass="shareButton.iconClass" :type="shareButton.iconType" />
+                <!-- end CmdIcon -->
             </a>
         </div>
     </div>
@@ -28,11 +32,13 @@
 <script>
 // import components
 import CmdFormElement from "./CmdFormElement"
+import CmdIcon from "./CmdIcon"
 
 export default {
     name: "CmdShareButtons",
     components: {
-        CmdFormElement
+        CmdFormElement,
+        CmdIcon
     },
     data() {
         return {

package/src/components/CmdSiteHeader.vue

@@ -183,7 +183,8 @@ export default {
         &.flex-container {
             width: 100%;
 
-            .cmd-logo {
+            .cmd-company-logo {
+                grid-area: company-logo;
                 flex: none;
             }
         }
@@ -220,6 +221,7 @@ export default {
             }
 
             #main-navigation-wrapper {
+                grid-area: main-navigation;
                 display: flex;
                 align-items: center;
                 border: 0;

package/src/components/CmdSiteSearch.vue

@@ -70,7 +70,12 @@
         <!-- begin filters -->
         <template v-if="cmdFakeSelect?.show">
             <a href="#" @click.prevent="showFilters = !showFilters">
-                <span :class="showFilters ? 'icon-single-arrow-up' : 'icon-single-arrow-down'"></span>
+                <!-- begin CmdIcon -->
+                <CmdIcon
+                    :iconClass="showFilters ? cmdIcon?.showFilters?.iconClass : cmdIcon?.hideFilters?.iconClass"
+                    :type="showFilters ? cmdIcon?.showFilters?.iconType : cmdIcon?.hideFilters?.iconType"
+                />
+                <!-- end CmdIcon -->
                 <span v-if="showFilters">{{ getMessage("cmdsitesearch.hide_filter_options") }}</span>
                 <span v-else>{{ getMessage("cmdsitesearch.show_filter_options") }}</span>
             </a>
@@ -102,10 +107,11 @@ import I18n from "../mixins/I18n"
 import DefaultMessageProperties from "../mixins/CmdSiteSearch/DefaultMessageProperties"
 
 // import files for components
-import CmdHeadline from "./CmdHeadline"
 import CmdFakeSelect from "./CmdFakeSelect"
 import CmdFormElement from "./CmdFormElement"
 import CmdFormFilters from "./CmdFormFilters"
+import CmdHeadline from "./CmdHeadline"
+import CmdIcon from "./CmdIcon"
 
 export default {
     emits: [
@@ -118,10 +124,11 @@ export default {
     name: "CmdBoxSiteSearch",
     mixins: [I18n, DefaultMessageProperties],
     components: {
-        CmdHeadline,
         CmdFakeSelect,
         CmdFormElement,
-        CmdFormFilters
+        CmdFormFilters,
+        CmdHeadline,
+        CmdIcon
     },
     data() {
         return {
@@ -158,7 +165,7 @@ export default {
             required: false
         },
         /**
-         * toggle use of filters (must configured)
+         * toggle use of filters (must be configured)
          */
         useFilters: {
             type: Boolean,
@@ -290,6 +297,24 @@ export default {
         cmdFakeSelect: {
             type: Object,
             required: false
+        },
+        /**
+         * properties for CmdIcon-component for filters
+         */
+        cmdIcon: {
+            type: Object,
+            default() {
+                return {
+                    showFilters: {
+                        iconClass: "icon-single-arrow-up",
+                        type: "auto"
+                    },
+                    hideFilters: {
+                        iconClass: "icon-single-arrow-down",
+                        type: "auto"
+                    }
+                }
+            }
         }
     },
     computed: {

package/src/components/CmdSystemMessage.vue

@@ -9,14 +9,17 @@
             <!-- begin close-icon -->
             <a
                 v-if="iconClose.show && iconClose.iconClass"
-                :class="iconClose.iconClass"
                 href="#"
                 @click.prevent="showSystemMessage = false"
                 :title="iconClose.tooltip"
-            ></a>
+            >
+                <!-- begin CmdIcon -->
+                <CmdIcon :iconClass="iconClose.iconClass" :type="iconClose.iconType" />
+                <!-- end CmdIcon -->
+            </a>
             <!-- end close-icon -->
 
-            <!-- begin cmd-headline -->
+            <!-- begin CmdHeadline -->
             <CmdHeadline
                 class="message-headline"
                 :iconClass="iconMessage.iconClass"
@@ -24,7 +27,7 @@
                 :headlineLevel="messageHeadlineLevel"
                 :id="htmlId"
             />
-            <!-- end cmd-headline -->
+            <!-- end CmdHeadline -->
 
             <!-- begin slot-content -->
             <slot></slot>
@@ -39,12 +42,14 @@ import Identifier from "../mixins/Identifier"
 
 // import components
 import CmdHeadline from "./CmdHeadline"
+import CmdIcon from "./CmdIcon"
 
 export default {
     name: "CmdSystemMessage",
     mixins: [Identifier],
     components: {
-        CmdHeadline
+        CmdHeadline,
+        CmdIcon
     },
     data() {
         return {

package/src/components/CmdTable.vue

@@ -5,13 +5,17 @@
                href="#" @click.prevent="fullWidth = !fullWidth"
                :title="iconToggleWidth.tooltip"
             >
-                <span :class="iconToggleWidth.iconClass"></span>
+                <!-- begin CmdIcon -->
+                <CmdIcon :iconClass="iconToggleWidth.iconClass" :type="iconToggleWidth.iconType" />
+                <!-- end CmdIcon -->
             </a>
             <a v-if="collapsible" class="button"
                href="#" @click.prevent="showTableData = !showTableData"
                :title="showTableData ? iconCollapse.tooltip : iconExpand.tooltip"
             >
-                <span :class="showTableData ? iconCollapse.iconClass : iconExpand.iconClass"></span>
+                <!-- begin CmdIcon -->
+                <CmdIcon :iconClass="showTableData ? iconCollapse.iconClass : iconExpand.iconClass" :type="showTableData ? iconCollapse.iconType : iconExpand.iconType" />
+                <!-- end CmdIcon -->
             </a>
         </div>
         <div class="inner-wrapper">
@@ -50,8 +54,14 @@
 </template>
 
 <script>
+// import components
+import CmdIcon from "./CmdIcon"
+
 export default {
     name: "CmdTable",
+    components: {
+        CmdIcon,
+    },
     data() {
         return {
             showTableData: true,