Preparing for Model-Driven Apps Dark Mode Icons - Improved

Preparing for Model-Driven Apps Dark Mode Icons - Improved

In my previous blog post on how to implement svg icons to work with dark mode for model-driven apps, I showed how to edit the SVG file to work in both light and dark mode using a SVG style. This method is used by many of the out-of-the-box Dynamics table icons.

However, there’s a better way that’s documented on learn.microsoft.com in Change model-driven app custom table icons:

"Where possible, remove any hard coded fill color attributes and use the `currentColor` keyword to avoid contrast issues."

With a further reference to Working with Scalable Vector Graphics (SVG) [in model-driven apps].

The change is straightforward - it is standard practice to create icons with a black fill colour (#000000):

<path ... fill="#000000" ... />

This needs to be changed to:

<path ... fill="currentColor" ... />

Which gives the same result for light vs dark mode as the style approach: