1. Document Library Pro
  2. Advanced Usage

How to change the document download and preview icons

The Document Library Pro plugin comes with several built-in icons: the file type icons, the document download icon, and a preview icon. This article explains how to replace these icons with your own.

Document library preview buttons
A document library with the built-in download and preview icons

Please note that these instructions are aimed at developers. If you don't know how to follow the instructions then we recommend asking your developer or posting a job on Codeable:

We've partnered with Codeable to provide our customers with expert help if required.

All icons in Document Library Pro are stored as SVG strings in the SVG_Icon class.

You can replace icons via the following two filters:

  • document_library_pro_icon_svg- passes a keyed array of all the SVG icon strings.
  • document_library_pro_file_type_icon_map - array indicating which icon should be shown for each specific file type.

Replacing the file type icons

You can replace the image for a file type group (e.g. 'image') by using the document_library_pro_icon_svg filter and replacing the SVG for the 'image' icon as seen in the code snippet below.

Note that {Your SVG string here} should be replaced with an actual SVG. Depending on the viewbox of your SVG you may also need additional styling to achieve the correct size for you layouts.

add_filter( 'document_library_pro_icon_svg', function( $svg_array ) { 
    $svg_array['image'] = '{Your SVG string here}';
    
    return $svg_array;
} );

If you'd like to add a new specific file type icon you can alter the file type icon map using document_library_pro_file_type_icon_map.

In the code below we add a new icon type mov for the file type mov. You can find the default mappings below or view it directly in the SVG_Icon class from the plugin.

add_filter( 'document_library_pro_icon_svg', function( $icon_map ) { 
    $icon_map['mov'] = 'mov';
    
    return $icon_map;
} );

Then add the new mov icon type and icon to the SVG array as follows:

add_filter( 'document_library_pro_icon_svg', function( $svg_array ) { 
    $svg_array['mov'] = '{Your SVG string here}';
    
    return $svg_array;
} );

Replacing the download icon

add_filter( 'document_library_pro_icon_svg', function( $svg_array ) { 
    $svg_array['download'] = '{Your SVG string here}';
    
    return $svg_array;
} );

Replacing the preview icon

add_filter( 'document_library_pro_icon_svg', function( $svg_array ) { 
    $svg_array['download'] = '{Your SVG string here}';
    
    return $svg_array;
} );

File type icon map

File Extension => Icon Name
// External
'www'       => 'www'
'external'  => 'www'
// Image formats.
'jpg'       => 'jpg'
'jpeg'      => 'jpg'
'jpe'       => 'jpg'
'gif'       => 'image'
'png'       => 'png'
'bmp'       => 'image'
'tiff'      => 'image'
'tif'       => 'image'
'ico'       => 'image'
'heic'      => 'image'
'psd'       => 'psd'
// Video formats.
'asf'       => 'video'
'asx'       => 'video'
'wmv'       => 'video'
'wmx'       => 'video'
'wm'        => 'video'
'avi'       => 'avi'
'divx'      => 'video'
'flv'       => 'video'
'mov'       => 'video'
'qt'        => 'video'
'mpeg'      => 'mp4'
'mpg'       => 'mp4'
'mpe'       => 'mp4'
'mp4'       => 'mp4'
'm4v'       => 'video'
'ogv'       => 'video'
'webm'      => 'video'
'mkv'       => 'video'
'3gp'       => 'video' // Can also be audio.
'3gpp'      => 'video' // Can also be audio.
'3g2'       => 'video' // Can also be audio.
'3gp2'      => 'video' // Can also be audio.
// Text formats.
'txt'       => 'txt'
'asc'       => 'default'
'c'         => 'default'
'cc'        => 'default'
'h'         => 'default'
'srt'       => 'default'
'css'       => 'css'
'htm'       => 'html'
'html'      => 'html'
'vtt'       => 'default'
'dfxp'      => 'default'
'rtf'       => 'rtf'
'js'        => 'js'
'swf'       => 'default'
'class'     => 'default'
// Audio formats.
'mp3'       => 'mp3'
'm4a'       => 'audio'
'm4b'       => 'audio'
'aac'       => 'audio'
'ra'        => 'audio'
'ram'       => 'audio'
'wav'       => 'audio'
'ogg'       => 'audio'
'oga'       => 'audio'
'flac'      => 'audio'
'mid'       => 'audio'
'midi'      => 'audio'
'wma'       => 'audio'
'wax'       => 'audio'
'mka'       => 'audio'
// PDF
'pdf'       => 'pdf'
'xps'       => 'pdf'
'oxps'      => 'pdf'
// Calendar
'ics'       => 'default'
// Archives
'tar'       => 'archive'
'zip'       => 'archive'
'gzip'      => 'archive'
'gz'        => 'archive'
'rar'       => 'archive'
'7z'        => 'archive'
'exe'       => 'exe'
'xcf'       => 'archive'
// Word Processor
'doc'       => 'word'
'wri'       => 'word'
'docx'      => 'word'
'docm'      => 'word'
'dotx'      => 'word'
'dotm'      => 'word'
'wp'        => 'word'
'wpd'       => 'word'
'pages'     => 'word'
'odt'       => 'word'
'rtx'       => 'word'
'onetoc'    => 'word'
'onetoc2'   => 'word'
'onetmp'    => 'word'
'onepkg'    => 'word'
// Presentation
'pot'       => 'presentation'
'pps'       => 'presentation'
'ppt'       => 'presentation'
'pptx'      => 'presentation'
'pptm'      => 'presentation'
'ppsx'      => 'presentation'
'ppsm'      => 'presentation'
'potx'      => 'presentation'
'potm'      => 'presentation'
'ppam'      => 'presentation'
'sldx'      => 'presentation'
'sldm'      => 'presentation'
'key'       => 'presentation'
'odp'       => 'presentation'
'odc'       => 'presentation'
'odg'       => 'presentation'
// Spreadsheet
'xla'       => 'spreadsheet'
'xls'       => 'spreadsheet'
'xlt'       => 'spreadsheet'
'xlw'       => 'spreadsheet'
'xlsx'      => 'spreadsheet'
'xlsm'      => 'spreadsheet'
'xlsb'      => 'spreadsheet'
'xltx'      => 'spreadsheet'
'xltm'      => 'spreadsheet'
'xlam'      => 'spreadsheet'
'numbers'   => 'spreadsheet'
'ods'       => 'spreadsheet'
'odb'       => 'spreadsheet'
'odf'       => 'spreadsheet'
'mdb'       => 'spreadsheet'
'mpp'       => 'spreadsheet'
'csv'       => 'csv'
'tsv'       => 'spreadsheet'

Related Articles

If searching the knowledge base hasn't answered your question, please contact support.