Merge pull request #6583 from surveyjs/bug/list-item-icon-size

Fix list item components don't apply item's iconSize
surveyjs · Jul 25, 2023 · 7cc4d3b · 7cc4d3b
2 parents 60a83b1 + ef9927f
commit 7cc4d3b
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 5 deletions.
diff --git a/packages/survey-angular-ui/src/components/list/list-item.component.html b/packages/survey-angular-ui/src/components/list/list-item.component.html
@@ -5,7 +5,7 @@
     </ng-container>
     <div [class]="listModel.cssClasses.itemBody" [style.paddingInlineStart]="paddingLeft">
     <ng-container *ngIf="!model.component">
-      <svg *ngIf="model.iconName" [class]="listModel.cssClasses.itemIcon" [iconName]="model.iconName" [size]="24"
+      <svg *ngIf="model.iconName" [class]="listModel.cssClasses.itemIcon" [iconName]="model.iconName" [size]="model.iconSize"
         sv-ng-svg-icon></svg>
       <sv-ng-string [model]="model.locTitle"></sv-ng-string>
     </ng-container>

diff --git a/packages/survey-vue3-ui/src/components/list/ListItem.vue b/packages/survey-vue3-ui/src/components/list/ListItem.vue
@@ -23,7 +23,7 @@
         v-if="item.iconName && !item.component"
         v-bind:class="model.cssClasses.itemIcon"
         :iconName="item.iconName"
-        :size="24"
+        :size="item.iconSize"
       ></sv-svg-icon>
       <survey-string v-if="!item.component" :locString="item.locTitle" />
       <component v-if="item.component" :is="item.component" :item="item">

diff --git a/src/knockout/components/list/list-item.html b/src/knockout/components/list/list-item.html
@@ -6,7 +6,8 @@
   <div data-bind="style: { paddingInlineStart: $data.model.getItemIndent($data.item) }, css: $data.model.cssClasses.itemBody">
   <!-- ko ifnot: $data.item.component -->
   <!-- ko if: $data.item.iconName -->
-  <sv-svg-icon data-bind="css: $data.model.cssClasses.itemIcon" params="iconName: $data.item.iconName, size: 24"></sv-svg-icon>
+  <!-- ko component: { name: "sv-svg-icon", params: { iconName: $data.item.iconName, size: $data.item.iconSize, css: $data.model.cssClasses.itemIcon } }-->
+  <!-- /ko -->
   <!-- /ko -->
   <!-- ko template: { name: 'survey-string', data: $data.item.locTitle } --><!-- /ko -->
   <!-- /ko -->

diff --git a/src/react/components/list/list-item.tsx b/src/react/components/list/list-item.tsx
@@ -37,7 +37,7 @@ export class ListItem extends SurveyElementBase<IListItemProps, any> {
           key={1}
           className={this.model.cssClasses.itemIcon}
           iconName={this.item.iconName}
-          size={24}
+          size={this.item.iconSize}
           aria-label={this.item.title}
         ></SvgIcon>;
         content.push(icon);

diff --git a/src/vue/components/list/list-item.vue b/src/vue/components/list/list-item.vue
@@ -23,7 +23,7 @@
         v-if="item.iconName && !item.component"
         v-bind:class="model.cssClasses.itemIcon"
         :iconName="item.iconName"
-        :size="24"
+        :size="item.iconSize"
       ></sv-svg-icon>
       <survey-string v-if="!item.component" :locString="item.locTitle" />
       <component v-if="item.component" :is="item.component" :item="item"> </component>