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.
Please note that these instructions are aimed at developers. If you feel comfortable using them, our article on how to use code snippets can serve as a guide. If you don't know how to follow the instructions then you can use our plugin customization service.
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'