Add custom file icons to a list

Question

We have a list with a link in it that points to a html file and the icon type is a blank square document at the moment, how can i add a custom icon for this?  I have followed the below but it changes the setting for all files with that extension.

http://www.sharepointdiary.com/2013/03/how-to-add-custom-file-type-icons-in-sharepoint.html

Basically the list item is abc123.html and i want to use my own icon for items only in this list.  If i changed it in the docicon.xml file it would apply to all html files in my farm which we don't want

Thanks

Answer 1

Hello MJ2012,

Like you already stated, as far as I know docicon.xml is only globally, no options to target it just to a single list:
http://msdn.microsoft.com/en-us/library/office/ms463701(v=office.14).aspx

But I found another option, using jQuery. Haven't tried it myself, but might be worth a shot:
http://stackoverflow.com/questions/780908/how-to-modify-sharepoint-filetype-icons-depending-on-parts-of-the-filename

Hope this helps

---

- Dennis | Netherlands | Blog | Twitter

Answer 2

Hi,

If you would like to change html file icon just for one library, you could use the JQuery to render this page:

1. Add the image to the SharePoint site, I added 1.png to Site Assets library.
2. Upload jquery.min.js file to Documents library. You could download the file from http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js
3. Then add content editor to the library page.

<script src="/sites/retu/Shared%20Documents/jquery.min.js" type="text/javascript"></script><script type="text/javascript">
$(document).ready(function(){
$("td.ms-vb-icon img[src*='ichtm.gif']").each(function(){
$(this).attr("src", "http://sp/sites/retu/SiteAssets/1.gif");  
});
});
</script>

I added the screenshot of my test result:

Regards,

---

Rebecca Tu
TechNet Community Support

Answer 3

Hi Rebecca

I've tried that but perhaps I am doing it wrong as it doesn't work - did I need to editor the content editor script?  I have and my example is below with the site names changed

<script src="/Public/sitename/Tips/Documents/jquery.min.js" type="text/javascript"></script><script type="text/javascript">
$(document).ready(function(){
$("td.ms-vb-icon img[src*='movieicon.png']").each(function(){
$(this).attr("src", "http://rootintranet/Public/sitename/Tips/PublishingImages/movieicon.png");  
});
});
</script>

I've tried uploading a file called movieicon.png - any ideas what's going on?

Also just want to add that this is a Links 'List' so the URLs we are pointing to are actually html files on a network share, but it should still realise that the link as the html extension at the end of it

Thanks

Answer 4

I have just tried putting the movieicon.png into the SiteAssets folder via sharepoint designer and it still doesn't work :-/

Answer 5

Hi,

You can try this -> http://www.sharepointdiary.com/2013/03/how-to-add-custom-file-type-icons-in-sharepoint.html

Answer 6

I've tried that already Juan that is to change file icons globally in SharePoint 

Answer 7

When you say it 'doesn't work', what do you mean and what have you tried? There are a myriad of ways for that script to fail if you're not familiar with jQuery and javascript, to the point where 'it doesn't work' is useless.

Answer 8

Well, I have followed the instructions provided and the icon image doesn't change so therefore it doesn't work.

I presume the example I have pasted back is what I should have entered in the content editor?

Answer 9

Yes, it is what should be copied into the content editor.

Ok, the first thing to do is check that the jQuery library is loaded. If you're using IE then there's a tool that can help which is accessed using 'F12'. That will let you see which javascript files have been loaded. Have a look in there for your jQuery file.

Not meaning to be rude but it's going to take a while to work through this with a novice and I may not be able to help for all of it.

Answer 10

Righto, not sure if it's being loaded or not.  there is one reference to it in the script pane of dev tools?

-family: inherit; vertical-align: baseline; border-top: 0px; border-right: 0px; padding-top: 0px">&quot;/Sites/sitename/Tips/Documents/jquery.min.js&quot;</span><span class="pln" style="border-bottom: 0px; border-left: 0px; padding-bottom: 0px; margin

Fair enough I've got no experience with JQuery but am fine with sharepoint so some help with a coder would be cool if possible

Answer 11

Have a look at these links  (particularly the second one): http://msdn.microsoft.com/en-us/library/ie/gg589512(v=vs.85).aspx

http://msdn.microsoft.com/en-us/library/ie/gg699336(v=vs.85).aspx

Hop onto the Script tab and have a look at the folder icon near the top in the middle. That should include all the javascript files that are in use on the page. It should include a whole load of names ending .js. We'd like to see the jQuery one in there.

Answer 12

Ok will do thanks, we've just tried alert('blah blah') and it doesn't appear on the page when refreshed so looks like it isn't being loaded.

Will check the above now thanks

Answer 13

Hi,

I will describe the steps in detail from the beginning:

1. Download jquery.min.js file from the Internet.
2. Upload jquery.min.js file to /public/sitename/tips/documents library.
3. Upload movieicon.png to http://rootintranet/Public/sitename/Tips/PublishingImages .
4. Add a content editor web part, Format text > Make up > html > edit html source, input the script below, I have modified it to fit your situation

<script src="/public/sitename/tips/documents/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("td.ms-vb-icon img[src*='ichtm.gif']").each(function(){
$(this).attr("src", "http://rootintranet/Public/sitename/Tips/PublishingImages/movieicon.png");  
});
});
</script>

Regards,

---

Rebecca Tu
TechNet Community Support

Answer 14

Hi Rebecca

That doesn't work for me, but it does when I apply the code in a content editor in a standard documents library - so we are nearly there!

If you see above I need to apply the custom icon to links in a 'links list' type - is this possible?

For example one of our linsk points to a html file on a file share and the path is file://servername/fileshare/story.html  So when I enter that link the default file icon (I think) is the unrecognised small blank white piece of paper icon?  However the same applied if i create a dummy link of http://www.google.html so it's almost like shrepoint doesn't know how to handle non http/.com items in a links list?

I am wondering if this isn't possible in Links Lists now and only document libraries?

Thanks!

Answer 15

Hi,

When we use JQuery to change the image on the page, we firstly locate the lable which represents the image via clicking F12 on the page.

I add the screenshot when I locate the html file image icon, you need to click F12, then click the image as location 1, then you will get the location 2:

Please refer to this and capture the screenshot of the image you would like to modify for me.

Regards,

---

Rebecca Tu
TechNet Community Support

Answer 16

Hi Rebecca

Thanks for your assistance!  It was icgen.gif that I had to change, after doing so the list items now have my custom image as the file type icon.

Thanks again :)