Scheduler - Resource's icon option does not support FontAwesome/SVG (T1321514) (DevExpress#32622)

Author: aleksei-semikozov

packages/devextreme/js/__internal/scheduler/__tests__/__mock__/model/popup.ts

@@ -44,6 +44,10 @@ export class PopupModel {
     return queryRequiredElement(this.element, '.dx-scheduler-form-subject-group .dx-scheduler-form-icon .dx-icon');
   }
 
+  get resourceIcon(): HTMLElement {
+    return queryRequiredElement(this.element, '.dx-scheduler-form-resources-group .dx-icon');
+  }
+
   get recurrenceWeekDayButtons(): HTMLElement {
     return queryRequiredElement(this.element, '.dx-scheduler-days-of-week-buttons');
   }

packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts

@@ -1186,6 +1186,32 @@ describe('Appointment Form', () => {
       );
     });
 
+    it('should render FontAwesome icon with correct CSS classes (T1322161)', async () => {
+      const { scheduler, POM } = await createScheduler({
+        ...getDefaultConfig(),
+        dataSource: [{
+          text: 'Resource test app',
+          startDate: new Date(2017, 4, 9, 9, 30),
+          endDate: new Date(2017, 4, 9, 11),
+          roomId: 1,
+        }],
+        resources: [{
+          fieldExpr: 'roomId',
+          icon: 'fas fa-home',
+          dataSource: [{ text: 'Room 1', id: 1 }, { text: 'Room 2', id: 2 }],
+        }],
+      });
+      const dataSource = (scheduler as any).getDataSource();
+      const appointment = dataSource.items()[0];
+
+      scheduler.showAppointmentPopup(appointment);
+
+      const { resourceIcon } = POM.popup;
+
+      expect(resourceIcon.classList.contains('fas')).toBe(true);
+      expect(resourceIcon.classList.contains('fa-home')).toBe(true);
+    });
+
     it('should create dxTagBox for resource with multiple selection', async () => {
       const { scheduler, POM } = await createScheduler({
         ...getDefaultConfig(),

packages/devextreme/js/__internal/scheduler/appointment_popup/utils.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from '@jest/globals';
+
+import { createFormIconTemplate } from './utils';
+
+describe('createFormIconTemplate', () => {
+  describe('FontAwesome icons support', () => {
+    it('should create icon element with FontAwesome classes', () => {
+      const template = createFormIconTemplate('fas fa-home');
+      const $icon = template();
+
+      expect($icon.hasClass('dx-icon')).toBe(true);
+      expect($icon.hasClass('fas')).toBe(true);
+      expect($icon.hasClass('fa-home')).toBe(true);
+    });
+
+    it('should create icon element with FontAwesome solid icon', () => {
+      const template = createFormIconTemplate('fa-solid fa-user');
+      const $icon = template();
+
+      expect($icon.hasClass('dx-icon')).toBe(true);
+      expect($icon.hasClass('fa-solid')).toBe(true);
+      expect($icon.hasClass('fa-user')).toBe(true);
+    });
+  });
+
+  describe('DevExtreme icons support', () => {
+    it('should create icon element with DevExtreme icon class', () => {
+      const template = createFormIconTemplate('tags');
+      const $icon = template();
+
+      expect($icon.hasClass('dx-icon')).toBe(true);
+      expect($icon.hasClass('dx-icon-tags')).toBe(true);
+    });
+  });
+
+  describe('empty icon', () => {
+    it('should create sized gap element when icon name is empty', () => {
+      const template = createFormIconTemplate('');
+      const $element = template();
+
+      expect($element.hasClass('dx-scheduler-form-icon-sized-gap')).toBe(true);
+    });
+  });
+});

packages/devextreme/js/__internal/scheduler/appointment_popup/utils.ts

@@ -6,17 +6,12 @@ import { isDefined } from '@js/core/utils/type';
 import type { Properties as DateBoxProperties } from '@js/ui/date_box';
 import type { SimpleItem } from '@js/ui/form';
 
+import { getImageContainer } from '../../core/utils/m_icon';
 import { getRecurrenceString, parseRecurrenceRule } from '../recurrence/base';
 import { daysFromByDayRule } from '../recurrence/days_from_by_day_rule';
 import type { Rule } from '../recurrence/types';
 
-export const createFormIconTemplate = (iconName: string): () => dxElementWrapper => {
-  if (iconName.length === 0) {
-    return (): dxElementWrapper => $('<div>').addClass('dx-scheduler-form-icon-sized-gap');
-  }
-
-  return (): dxElementWrapper => $('<i>').addClass('dx-icon').addClass(`dx-icon-${iconName}`);
-};
+export const createFormIconTemplate = (iconName: string): () => dxElementWrapper => (): dxElementWrapper => getImageContainer(iconName) ?? $('<div>').addClass('dx-scheduler-form-icon-sized-gap');
 
 export const getStartDateCommonConfig = (firstDayOfWeek: string): SimpleItem => ({
   colSpan: 1,