web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

No record found.

Community site session details

Community site session details

Session Id :
Microsoft Dynamics 365 | Integration, Dataverse...
Suggested Answer

SVG Icon Fill Color for UCI

(0) ShareShare
ReportReport
Posted on by 49

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
  
  

I have the same question (0)
  • Suggested answer
    Henry J. Profile Picture
    5,237 on at

    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

  • loozle Profile Picture
    49 on at

    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
    5,237 on at

    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
    49 on at

    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

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

Responsible AI policies

As AI tools become more common, we’re introducing a Responsible AI Use…

Neeraj Kumar – Community Spotlight

We are honored to recognize Neeraj Kumar as our Community Spotlight honoree for…

Leaderboard > Microsoft Dynamics 365 | Integration, Dataverse, and general topics

#1
Siv Sagar Profile Picture

Siv Sagar 93 Super User 2025 Season 2

#2
#ManoVerse Profile Picture

#ManoVerse 74

#3
Martin Dráb Profile Picture

Martin Dráb 64 Most Valuable Professional

Last 30 days Overall leaderboard

Product updates

Dynamics 365 release plans