2

I am wrapping up the development of a custom action on a menu item within SharePoint and have a requirement to add a logo to it. I have done some reading on this and it doesn't appear to be as straight forward as one would think. I ran across this thread: http://harouny.com/2013/07/04/customise-icon-ribbon-custom-action-sharepoint-2013/

That link is for a custom action for a ribbon, however. I thought it'd be the same concept so I followed a thread on Microsoft explaining all the attributes of a CustomAction element. There is an attribute called ImageUrl but it doesn't appear to be working for me. Below is my code for the Elements.Xml file...

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction Id="dbba1823-1524-4dd9-be18-0b1a547a2a32.LaunchApp"
                RegistrationType="FileType"
                RegistrationId="xml"
                Location="EditControlBlock"
                Sequence="10001"
                ImageUrl="https://mySite.sharepoint.com/myPics/myIcon.ico"
                Title="Launch In Windows">
    <!-- 
    Update the Url below to the page you want the custom action to use.
    Start the URL with the token ~remoteAppUrl if the page is in the
    associated web project, use ~appWebUrl if page is in the app project.
    -->
    <UrlAction Url="~appWebUrl/Pages/Default.aspx?HostUrl={HostUrl}&amp;ItemURL={ItemUrl}" />
  </CustomAction>
</Elements>

I have placed the image into a Picture Library and have also tried using a direct path. I was expecting that if the image was loading but broken, it'd at least give me an 'X' or something but it looks like nothing I do even takes affect.

Thanks in advance for any helpful input!

  • 1
    did you try with non .ico extension? – Tiago Duarte Jul 15 '14 at 5:57
  • Yes. I tried multiple different images and thought there may be some kind of size restriction but it doesn't seem to be the issue. – mwilson Jul 15 '14 at 14:04
  • perhaps you can check if fiddler throws any 404s for that image URL – Tiago Duarte Jul 15 '14 at 14:06
  • I ran the debugger and did not receive any 404 error. The HTML is capturing the icon source perfectly fine. When I paste the URL to the image (held in a SharePoint Picture Library) it renders perfectly fine. – mwilson Jul 16 '14 at 1:03
  • 1
    maybe using "~appWebUrl/images/myIcon.png" or data:image would help. I wouldnt use an .ico until I was sure it works with a png. websemantics.co.uk/online_tools/image_to_data_uri_convertor – Tiago Duarte Jul 16 '14 at 6:09
2
+50

according to MS, ImageURL is

Optional Text. Specifies a virtual server relative link to an image that presents an icon for the item.

which means you should probably start with

ImageURL="/myPics/myIcon.ico"

or

ImageUrl="/_layouts/images/workflows.gif"

as already stated, try to use an ootb icon so that you can troubleshoot not the image format and size but other possible problems, such as permissions

if everything fails, try using a dataimage and check what is being rendered in the browser dev tools and fiddler. it looks like there are issues when referencing images from apps

can you find icons for other menu items?

since this is for a menu item for SP2013, maybe there is no icon support

EDIT:

I have deployed a solution using the below xml (using a default 16x16 icon) from layouts, and it does work.

however, I have also found that all menu item icons are for some reason being hidden.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction Id="21c1f1f7-70ad-4a02-92e1-444cb991c251.App-MenuItemCustomAction"
  RegistrationType="List"
  RegistrationId="100"
  Location="EditControlBlock"
  Sequence="10001" ImageUrl="/_layouts/15/images/icpdf.png"
  Title="My App Part">
    <!--
Update the Url below to the page you want the custom action to use.
Start the URL with the token ~remoteAppUrl if the page is in the
associated web project, use ~appWebUrl if page is in the app project.
-->
    <UrlAction Url="~appWebUrl/Pages/Default.aspx" />
  </CustomAction>
</Elements>

so perhaps you are experiencing the same problem, fixable with something like (CEWP)

.ms-core-menu-link * {
    display: inline !important;
}
  • Thank you for this. This did the trick(ish). The problem that I have now is that I have to apply that CSS to the master page (I'm assuming). However, this is the answer! Thank you very much! – mwilson Jul 24 '14 at 23:56
  • Quick question that I can't quite find the answer to: Are menu item icons turned off by default for SharePoint 2013/SharePoint Online? Is there a way to turn them on through the interface (maybe somewhere in central admin or the site collection level?) – mwilson Jul 25 '14 at 0:12
  • 1
    I just found out this, so I don't know any details yet. ms is adding a ms-hide class to all icons. I will try to find out why. the icons are in the markup so my first guess is they forgot to make them visible when the container becomes visible – Tiago Duarte Jul 25 '14 at 0:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.