[devexpress] menu tree에서 icon을 image로 교체하기

https://js.devexpress.com/Documentation/Guide/Themes_and_Styles/Icons/#Custom_Images_as_Icons

// 선택전 아이콘 이미지
.dx-icon-customicon { // in Angular apps, add ::ng-deep before
    background-image: url(https://naver.com/favicon.ico);
}

// 선택 후 아이콘 이미지
.dx-state-selected .dx-icon-customicon {
    background-image: url(https://kakao.com/favicon.ico);
}

Layout.vue 파일내 menuItems 데이터 참고!

... // Layout.vue 파일 내부 시작
data() {
    return {
    ...  // 기타 devexpress menu관련 변수
      menuOpened: this.isLarge,
      menuTemporaryOpened: false,
      menuItems: [
        {
          text: "HOME",
          path: "/Index",
          icon: "home", // devexpress icon library 사용 ==> <i class="dx-icon-home"></i>  변환됨
        },
        {
          text: "DashBoard",
          path: "/DashBoard",
          icon: "customicon", // custom 이미지 사용 ==> <i class="dx-icon-customicon"></i> 변환됨
        },
      ],
    };
  },
... // Layout.vue 파일 내부끝

이런식으로 이미지를 넣어줄수 있음. 보정이 필요해보임. 왼쪽으로 쏠림현상 땜시...

퍼블리셔 분께 헬프를 ... 피스~