vcl-404992-expresscrossplatformlibrary-high-dpi-and-graphics-glyphs-and-images-third-party-svg-icon-adaptation.md
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 change their colors according to skins and palettes used and active palette interaction settings.
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.
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.
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.
This topic section lists all settings that allow you to enable or disable skin palette interaction for all or individual UI element glyphs.
The following class properties allow you to disable or enable palette interaction for SVG glyphs application-wide:
TdxVisualRefinements.UseDisabledSkinPaletteForSVGSpecifies if UI elements apply the active vector skin palette to disabled state glyphs at the application level.TdxVisualRefinements.UseEnabledSkinPaletteForSVGSpecifies if UI elements apply the active vector skin palette to enabled state glyphs at the application level.
Many UI elements allow you to load individual glyphs or assign glyphs stored in a TcxImageList component. You can use the following properties to explicitly enable or disable palette interaction for individual UI element glyphs or image lists:
TdxGPImage.UseDisabledSkinPaletteForSVGSpecifies if the active vector skin palette affects the stored SVG glyph for the disabled UI element state.TdxGPImage.UseEnabledSkinPaletteForSVGSpecifies if the active vector skin palette affects the stored SVG glyph for the enabled UI element state.TcxCustomImageList.UseDisabledSkinPaletteForSVGSpecifies if the active vector skin palette affects stored SVG glyphs for the disabled UI element state.TcxCustomImageList.UseEnabledSkinPaletteForSVGSpecifies if the active vector skin palette affects stored SVG glyphs for the enabled UI element state.
Footnotes
See Also