Third-Party SVG Icon Adaptation for DevExpress Skins and Palettes
- 2 minutes to read
DevExpress controls can change their SVG icon colors based on the current skin and palette to maintain UI element contrast. All vector icons shipped with the DevExpress Icon Library always change their colors according to used skins and palettes.
To use third-party icons in the same way as DevExpress icons, you need to define and use SVG colors with the following CSS style names: Red, Green, Blue, Yellow, Black, and White. Refer to the following topic for more information Draw SVG Icons.
Use SVG Icon Builder
Download and install our standalone SVG Icon Builder application.
Run SVG Icon Builder and click LIBRARY SETTING.
Select the required source folder for custom icons[1] and click the ADD FOLDER button.
Click the Adjust button to scan all icons in the source folder and automatically adjust their size and color settings according to DevExpress guidelines. You can preview pending changes and manually change incorrectly converted colors.
To save pending changes in the .iconbuilder folder automatically created in the source folder, click the CONVERT button.
Add Adapted Custom Icons to Icon Library
You can use adapted third-party icons from the created .iconbuilder folder as a custom collection in the Icon Library. Click the Add a custom collection button in the Image Picker dialog, select the target folder in a shell dialog, and click the Select button.
Refer to the following topic for more information: Manage Custom Icon Collections.
-
We use Google Material Design icons as an example.