Get OOB Document Type Icon Using SharePoint JavaScript Client Object Model

SP.Web.mapToIcon method in sp.js file returns the name of the icon that is used to represent a specified document. By default, these icons are stored in the SharePoint hive /TEMPLATE/IMAGES folder. Therefore by appending to the _layouts/images/, we can form the URL of these images.

<script type="text/javascript">
  var iconName;

  function getDocumentTypeIcon() {
    var context = new SP.ClientContext.get_current();
    var web = context.get_web();
    iconName = web.mapToIcon('test1.docx', '', SP.Utilities.IconSize.Size16);
    context.executeQueryAsync(Function.createDelegate(this, this.onSuccessMethod), Function.createDelegate(this, this.onFailureMethod));

  function onSuccessMethod(sender, args) {
    var iconUrl = _spPageContextInfo.siteAbsoluteUrl + "/_layouts/images/" + iconName.m_value;

  function onFailureMethod(sender, args) {
    alert("Error: " + args.get_message());

  ExecuteOrDelayUntilScriptLoaded(getDocumentTypeIcon, 'sp.js');

Document type icon names take the form of IC<Document Type>.gif (Ex: icdocx.gif). The information about which icon is displayed for which document type in stored in the DOCICON.XML file stored in /TEMPLATE/XML folder in the SharePoint hive.


frevd said...

Thank you for finding out.

TermSet Solution said...

Thanks - a great tip!