Skip to main content

Notifications

Announcements

No record found.

News and Announcements icon
Community site session details

Community site session details

Session Id :
Dynamics 365 Community / Forums / Microsoft Dynamics 365 | Integration, Dataverse... / SVG Icon Fill Color fo...
Microsoft Dynamics 365 | Integration, Dataverse...
Suggested answer

SVG Icon Fill Color for UCI

(0) ShareShare
ReportReport
Posted on by loozle 47

I have read in a few places online that by using an empty fill(fill=""), Dynamics own CSS will fill an SVG with the appropriate color.
https://crmtipoftheday.com/1189/fill-svg-files-for-all-occasions/

The problem comes that the SVGs in the ribbon should be one color and at More Commands they should be another.

By using an empty fill, the SVG is black in all places.

How, if possible, do I tell my SVG to use the existing CSS so it is colored appropriately?

<svg id="Layer_1" data-name="Layer 1" xmlns="">http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<defs><style>.cls-1{fill:none;}</style></defs>
<title>GP</title>
<rect class="cls-1" width="16" height="16"/>
<path fill="" d="m 10.403929,14.197075 h 0.300491 v 0.30045 h -0.300491 z m -0.901475,-0.601 h 2.10344 v 0.3005 h -2.10344 z m 0.901475,-0.601 h 0.300491 v 0.3005 h -0.300491 z m -5.595754,-0.09855 0.63764,0.63765 0.637641,-0.63765 0.212447,0.21245 -0.637641,0.63765 0.637342,0.63735 -0.212447,0.21245 -0.637342,-0.63735 -0.637341,0.63735 -0.212447,-0.21245 0.637342,-0.63735 -0.637641,-0.63765 z m 4.093296,-0.8029 v 3.3054 h 3.305406 v -3.3054 z m -5.108354,0 v 3.3054 h 3.305405 v -3.3054 z m 4.507371,-0.601 h 4.507372 v 4.5074 H 8.300488 Z m -5.108354,0 h 4.507371 v 4.5074 H 3.192134 Z m 6.310319,-3.0049 h 2.103441 v 0.3005 H 9.502453 Z m -4.20688,-0.9015 h 0.300492 v 0.9015 h 0.901474 v 0.3005 H 5.596065 v 0.90145 H 5.295573 V 8.788225 H 4.3941 v -0.3005 h 0.901473 z m 3.605894,-0.60095 v 3.3054 h 3.305406 v -3.3054 z m -5.10835,0 v 3.3054 h 3.305405 v -3.3054 z m 4.507367,-0.601 h 4.507372 v 4.5074 H 8.300484 Z m -5.10835,0 h 4.507371 v 4.50735 H 3.192134 Z M 16,5.910275 h -1.426906 l -0.413479,-1.29315 h -2.067393 l -0.409425,1.29315 h -1.418799 l 2.116038,-5.81305 h 1.552571 z m -2.14036,-2.29845 -0.624271,-1.9539 q -0.06891,-0.2189 -0.09729,-0.52295 h -0.03243 q -0.02027,0.2554 -0.101343,0.50675 l -0.632379,1.9701 z m -6.283253,0.2959 v 2.00255 H 6.267038 v -5.81305 h 2.051178 q 2.197112,0 2.197112,1.85255 0,0.8756 -0.632379,1.4188 -0.628325,0.53915 -1.68229,0.53915 z m 0,-2.80515 v 1.812 h 0.514822 q 1.045857,0 1.045857,-0.91615 0,-0.89585 -1.045857,-0.89585 z m -2.440335,4.41855 q -0.851279,0.4905 -2.116037,0.4905 -1.402584,0 -2.2133265,-0.7743 Q 0,4.459025 0,3.096975 q 0,-1.37015 0.883709,-2.2336 0.8837095,-0.8634 2.351153,-0.8634 0.924246,0 1.629592,0.25535 v 1.2283 q -0.672916,-0.38915 -1.645807,-0.38915 -0.814796,0 -1.3296175,0.531 -0.5107675,0.527 -0.5107675,1.4107 0,0.8959 0.4580695,1.3864 0.462123,0.4905 1.2444895,0.4905 0.470231,0 0.745883,-0.1338 V 3.644225 H 2.663289 v -1.04585 h 2.472763 z"
/>
</svg>


   
  GPA Calculator

  • loozle Profile Picture
    loozle 47 on at
    RE: SVG Icon Fill Color for UCI

    Hi Henry,

    Yes, this is on-prem 9.0.3.7 utilizing the UCI.

    I see in your images that the icons are the same, but the ribbon itself(data-id="CommandBar) is white as well, therefore, there would be no change. Hopefully I can get our sandbox up today with the latest on-prem release and see if that makes a difference.

    Thank you

  • Suggested answer
    Henry J. Profile Picture
    Henry J. 5,237 on at
    RE: SVG Icon Fill Color for UCI

    Hi -

    From the dark and collapse navigation bar, may I assume that you are on-premise and are on one of the early Unified Interface version?
    I did the same test as you online, and the icon is the same:

    pastedimage1581506557489v1.png

    pastedimage1581506565668v2.png

  • loozle Profile Picture
    loozle 47 on at
    RE: SVG Icon Fill Color for UCI

    Hi Henry,

    My apologies on my lack of proper language.
    Ribbon is the jQuery element of data-id="CommandBar".
    More Commands would be an ellipses or the jQuery element of data-id="OverflowButton".

    At the activitypointer entity, the CommandBar has Flows listed as a button and the icon is white.
    Please note the ellipses on the far right.

    pastedimage1580845100288v1.png

    If you zoom the view to the point where Flows is no longer on the Command Bar, you will find it at the ellipses and the icon is now black.

    pastedimage1580845477283v2.png

    Are these two different icons or is Dynamics doing something in the background to recolor these on the fly?

    Thank you!

  • Suggested answer
    Henry J. Profile Picture
    Henry J. 5,237 on at
    RE: SVG Icon Fill Color for UCI

    Hi,

    That's a good question.

    For sitemap entity icons, I generally recommend to remove fill="#XXXXXX" altogether from your SVG file.

    For command bar buttons, I'd like to know more about the distinction you make between "Ribbon" and "More Command"?

    When I look at first-party buttons, such as Flow.svg or Refresh.svg, they both have a fill color that's hard coded:

    Henry

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Announcing Our 2025 Season 1 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Vahid Ghafarpour – Community Spotlight

We are excited to recognize Vahid Ghafarpour as our February 2025 Community…

Tip: Become a User Group leader!

Join the ranks of valued community UG leaders

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 292,516 Super User 2025 Season 1

#2
Martin Dráb Profile Picture

Martin Dráb 231,375 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Get batch job history log from D365 FO to Power Automate

Product updates

Dynamics 365 release plans