SVGs won't show as custom icons in DropDownList

The app is being built with Next.js 14. The t('####') field comes from next-intl for globalization.

I'm using the same icon as a test

The code:




CSS:


2 Replies

UD UdhayaKumar Duraisamy Syncfusion Team July 19, 2024 12:28 PM UTC

To properly display SVGs in the dropdown's popup list, you need to set the CSS style for the respective class. This includes setting the display to block and the background-position to center. Below is the code snippet and sample for your reference:


.transportation-icon {

  display: block;

  background-image: url('../public/transportation-icon.svg');

  background-position: center;

  background-repeat: no-repeat;

  width: 28px !important;

  height: 28px;

}


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Nextjs-Dropdownlist-SVGs1358458801



GE George July 19, 2024 12:38 PM UTC

Τhank you. It works


Loader.
Up arrow icon