diff --git a/addons/web/static/src/css/mimetypes.css b/addons/web/static/src/css/mimetypes.css
deleted file mode 100644
index 43aa6b7fae9..00000000000
--- a/addons/web/static/src/css/mimetypes.css
+++ /dev/null
@@ -1,66 +0,0 @@
-.o_image {
-    background-image: url('/web/static/src/img/mimetypes/unknown.png');
-    background-size: contain;
-    width: 100px;
-    height: 80px;
-    display: inline-block;
-    background-position: center;
-    background-repeat: no-repeat;
-}
-.o_image[data-mimetype^='image'] {
-    background-image: url('/web/static/src/img/mimetypes/image.png');
-}
-.o_image[data-mimetype^='audio'] {
-    background-image: url('/web/static/src/img/mimetypes/audio.png');
-}
-.o_image[data-mimetype*='octet-stream'], .o_image[data-mimetype*='download'] {
-    background-image: url('/web/static/src/img/mimetypes/binary.png');
-}
-.o_image[data-mimetype^='video'], .o_image[title$='.mp4'], .o_image[title$='.avi'] {
-    background-image: url('/web/static/src/img/mimetypes/video.png');
-}
-.o_image[data-mimetype$='archive'], .o_image[data-mimetype$='compressed'], .o_image[data-mimetype*='zip'], .o_image[data-mimetype$='tar'], .o_image[data-mimetype*='package'] {
-    background-image: url('/web/static/src/img/mimetypes/archive.png');
-}
-.o_image[data-mimetype='application/pdf'] {
-    background-image: url('/web/static/src/img/mimetypes/pdf.png');
-}
-.o_image[data-mimetype^='text'], .o_image[data-mimetype$='rtf'] {
-    background-image: url('/web/static/src/img/mimetypes/text.png');
-}
-.o_image[data-mimetype^='text-master'], .o_image[data-mimetype*='document'], .o_image[data-mimetype*='msword'] {
-    background-image: url('/web/static/src/img/mimetypes/document.png');
-}
-.o_image[data-mimetype$='postscript'], .o_image[data-mimetype$='cdr'], .o_image[data-mimetype$='xara'], .o_image[data-mimetype$='cgm'], .o_image[data-mimetype$='graphics'], .o_image[data-mimetype$='draw'], .o_image[data-mimetype*='svg'] {
-    background-image: url('/web/static/src/img/mimetypes/vector.png');
-}
-.o_image[data-mimetype*='xml'], .o_image[data-mimetype$='css'], .o_image[data-mimetype$='html'] {
-    background-image: url('/web/static/src/img/mimetypes/html.png');
-}
-.o_image[data-mimetype*='-image'], .o_image[data-mimetype*='diskimage'] {
-    background-image: url('/web/static/src/img/mimetypes/disk.png');
-}
-.o_image[data-mimetype$='csv'], .o_image[data-mimetype*='vc'], .o_image[data-mimetype*='excel'], .o_image[data-mimetype$='numbers'], .o_image[data-mimetype$='calc'], .o_image[data-mimetype*='mods'], .o_image[data-mimetype*='spreadsheet'] {
-    background-image: url('/web/static/src/img/mimetypes/spreadsheet.png');
-}
-.o_image[data-mimetype^='key'] {
-    background-image: url('/web/static/src/img/mimetypes/certificate.png');
-}
-.o_image[data-mimetype*='presentation'], .o_image[data-mimetype*='keynote'], .o_image[data-mimetype*='teacher'], .o_image[data-mimetype*='slideshow'], .o_image[data-mimetype*='powerpoint'] {
-    background-image: url('/web/static/src/img/mimetypes/presentation.png');
-}
-.o_image[data-mimetype*='cert'], .o_image[data-mimetype*='rules'], .o_image[data-mimetype*='pkcs'], .o_image[data-mimetype$='stl'], .o_image[data-mimetype$='crl'] {
-    background-image: url('/web/static/src/img/mimetypes/certificate.png');
-}
-.o_image[data-mimetype*='-font'] {
-    background-image: url('/web/static/src/img/mimetypes/font.png');
-}
-.o_image[data-mimetype*='-dvi'] {
-    background-image: url('/web/static/src/img/mimetypes/print.png');
-}
-.o_image[data-mimetype*='script'], .o_image[data-mimetype$='bat'], .o_image[data-mimetype$='cgi'], .o_image[data-mimetype$='-c'], .o_image[data-mimetype*='java'], .o_image[data-mimetype*='ruby'] {
-    background-image: url('/web/static/src/img/mimetypes/script.png');
-}
-.o_image[data-mimetype*='calendar'], .o_image[data-mimetype$='ldif'] {
-    background-image: url('/web/static/src/img/mimetypes/calendar.png');
-}
diff --git a/addons/web/static/src/less/mimetypes.less b/addons/web/static/src/less/mimetypes.less
new file mode 100644
index 00000000000..12e86a34ab8
--- /dev/null
+++ b/addons/web/static/src/less/mimetypes.less
@@ -0,0 +1,67 @@
+.o_image {
+    background-image: url('/web/static/src/img/mimetypes/unknown.png');
+    background-size: contain;
+    width: 100px;
+    height: 80px;
+    display: inline-block;
+    background-position: center;
+    background-repeat: no-repeat;
+
+    &[data-mimetype^='image'] {
+        background-image: url('/web/static/src/img/mimetypes/image.png');
+    }
+    &[data-mimetype^='audio'] {
+        background-image: url('/web/static/src/img/mimetypes/audio.png');
+    }
+    &[data-mimetype*='octet-stream'], &[data-mimetype*='download'] {
+        background-image: url('/web/static/src/img/mimetypes/binary.png');
+    }
+    &[data-mimetype^='video'], &[title$='.mp4'], &[title$='.avi'] {
+        background-image: url('/web/static/src/img/mimetypes/video.png');
+    }
+    &[data-mimetype$='archive'], &[data-mimetype$='compressed'], &[data-mimetype*='zip'], &[data-mimetype$='tar'], &[data-mimetype*='package'] {
+        background-image: url('/web/static/src/img/mimetypes/archive.png');
+    }
+    &[data-mimetype='application/pdf'] {
+        background-image: url('/web/static/src/img/mimetypes/pdf.png');
+    }
+    &[data-mimetype^='text'], &[data-mimetype$='rtf'] {
+        background-image: url('/web/static/src/img/mimetypes/text.png');
+    }
+    &[data-mimetype^='text-master'], &[data-mimetype*='document'], &[data-mimetype*='msword'] {
+        background-image: url('/web/static/src/img/mimetypes/document.png');
+    }
+    &[data-mimetype$='postscript'], &[data-mimetype$='cdr'], &[data-mimetype$='xara'], &[data-mimetype$='cgm'], &[data-mimetype$='graphics'], &[data-mimetype$='draw'], &[data-mimetype*='svg'] {
+        background-image: url('/web/static/src/img/mimetypes/vector.png');
+    }
+    &[data-mimetype*='xml'], &[data-mimetype$='css'], &[data-mimetype$='html'] {
+        background-image: url('/web/static/src/img/mimetypes/html.png');
+    }
+    &[data-mimetype*='-image'], &[data-mimetype*='diskimage'] {
+        background-image: url('/web/static/src/img/mimetypes/disk.png');
+    }
+    &[data-mimetype$='csv'], &[data-mimetype*='vc'], &[data-mimetype*='excel'], &[data-mimetype$='numbers'], &[data-mimetype$='calc'], &[data-mimetype*='mods'], &[data-mimetype*='spreadsheet'] {
+        background-image: url('/web/static/src/img/mimetypes/spreadsheet.png');
+    }
+    &[data-mimetype^='key'] {
+        background-image: url('/web/static/src/img/mimetypes/certificate.png');
+    }
+    &[data-mimetype*='presentation'], &[data-mimetype*='keynote'], &[data-mimetype*='teacher'], &[data-mimetype*='slideshow'], &[data-mimetype*='powerpoint'] {
+        background-image: url('/web/static/src/img/mimetypes/presentation.png');
+    }
+    &[data-mimetype*='cert'], &[data-mimetype*='rules'], &[data-mimetype*='pkcs'], &[data-mimetype$='stl'], &[data-mimetype$='crl'] {
+        background-image: url('/web/static/src/img/mimetypes/certificate.png');
+    }
+    &[data-mimetype*='-font'] {
+        background-image: url('/web/static/src/img/mimetypes/font.png');
+    }
+    &[data-mimetype*='-dvi'] {
+        background-image: url('/web/static/src/img/mimetypes/print.png');
+    }
+    &[data-mimetype*='script'], &[data-mimetype$='bat'], &[data-mimetype$='cgi'], &[data-mimetype$='-c'], &[data-mimetype*='java'], &[data-mimetype*='ruby'] {
+        background-image: url('/web/static/src/img/mimetypes/script.png');
+    }
+    &[data-mimetype*='calendar'], &[data-mimetype$='ldif'] {
+        background-image: url('/web/static/src/img/mimetypes/calendar.png');
+    }
+}
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index 64d60dcf379..3ddbb86f935 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -43,6 +43,8 @@
             <link rel="stylesheet" href="/web/static/lib/fontawesome/css/font-awesome.css"/>
             <link rel="stylesheet" href="/web/static/src/fonts/lato/stylesheet.css" />
 
+            <link rel="stylesheet" href="/web/static/src/less/mimetypes.less"/>
+
             <!-- Datetime Picker -->
             <link rel="stylesheet" href="/web/static/lib/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css"/>
             <script type="text/javascript" src="/web/static/lib/bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js"></script>
@@ -94,7 +96,6 @@
                 odoo._modules = <t t-raw="get_modules_order()"/>;
             </script>
             <link rel="stylesheet" href="/web/static/src/css/base.css"/>
-            <link rel="stylesheet" href="/web/static/src/css/mimetypes.css"/>
             <link rel="stylesheet" href="/web/static/src/css/data_export.css"/>
             <link rel="stylesheet" href="/base/static/src/css/modules.css"/>
 
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 83b83c2dacf..752e8bb00e0 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -13,7 +13,6 @@
 <template id="assets_frontend" name="Website assets">
     <link id="bootstrap_css" rel="stylesheet" href='/website/static/src/less/import_bootstrap.less'/>
 
-    <link rel="stylesheet" href="/web/static/src/css/mimetypes.css"/>
     <link rel="stylesheet" href='/website/static/src/css/website.css'/>
 
     <script type="text/javascript" src="/web/static/src/js/framework/session_instance.js"></script>