diff --git a/addons/mail/static/src/less/thread.less b/addons/mail/static/src/less/thread.less
index 8f4a059b0c3..8cb0bbae55f 100644
--- a/addons/mail/static/src/less/thread.less
+++ b/addons/mail/static/src/less/thread.less
@@ -69,14 +69,14 @@
                 opacity: 0;
             }
         }
-
-
-        i.o_thread_message_star, i.o_thread_message_needaction, i.o_thread_message_reply, i.o_thread_message_email  {
+        .o_thread_icons {
             cursor: pointer;
-            opacity: 0;
-            &.fa-star {
-                opacity: @mail-thread-icon-opacity;
-                color: gold;
+            > .o_thread_icon {
+                opacity: 0;
+                &.fa-star {
+                    opacity: @mail-thread-icon-opacity;
+                    color: gold;
+                }
             }
         }
 
@@ -84,8 +84,7 @@
             .o_thread_message_side_date {
                 opacity: @mail-thread-side-date-opacity;
             }
-
-            i.o_thread_message_star, i.o_thread_message_needaction, i.o_thread_message_reply, i.o_thread_message_email {
+            .o_thread_icons > * {
                 opacity: @mail-thread-icon-opacity;
                 &:hover {
                     opacity: 1;
@@ -207,3 +206,11 @@
         display: block;
     }
 }
+
+.o_web_client.o_touch_device {
+    .o_thread_icons {
+        > .o_thread_icon {
+            opacity: @mail-thread-icon-opacity;
+        }
+    }
+}
diff --git a/addons/mail/static/src/xml/thread.xml b/addons/mail/static/src/xml/thread.xml
index b9579be0790..bdee6c580df 100644
--- a/addons/mail/static/src/xml/thread.xml
+++ b/addons/mail/static/src/xml/thread.xml
@@ -109,15 +109,15 @@
                             </t>
                         </span>
                     </span>
-                    <span>
+                    <span t-attf-class="o_thread_icons">
                         <i t-if="options.display_stars &amp;&amp; !message.is_system_notification"
-                            t-att-class="'fa fa-lg o_thread_message_star ' + (message.is_starred ? 'fa-star' : 'fa-star-o')"
+                            t-att-class="'fa fa-lg o_thread_icon o_thread_message_star ' + (message.is_starred ? 'fa-star' : 'fa-star-o')"
                             t-att-data-message-id="message.id" title="Mark as Todo"/>
                        <i t-if="message.record_name &amp;&amp; message.model != 'mail.channel' &amp;&amp; options.display_reply_icon"
-                           class="fa fa-reply o_thread_message_reply"
+                           class="fa fa-reply o_thread_icon o_thread_message_reply"
                            t-att-data-message-id="message.id" title="Reply"/>
                         <i t-if="message.is_needaction &amp;&amp; options.display_needactions"
-                           class="fa fa-check o_thread_message_needaction"
+                           class="fa fa-check o_thread_icon o_thread_message_needaction"
                            t-att-data-message-id="message.id" title="Mark as Read"/>
                     </span>
                 </p>
diff --git a/addons/web/static/src/js/chrome/abstract_web_client.js b/addons/web/static/src/js/chrome/abstract_web_client.js
index 5a84f4fe4b3..982fd05b1e0 100644
--- a/addons/web/static/src/js/chrome/abstract_web_client.js
+++ b/addons/web/static/src/js/chrome/abstract_web_client.js
@@ -14,6 +14,7 @@ odoo.define('web.AbstractWebClient', function (require) {
 var ActionManager = require('web.ActionManager');
 var concurrency = require('web.concurrency');
 var core = require('web.core');
+var config = require('web.config');
 var crash_manager = require('web.crash_manager');
 var data_manager = require('web.data_manager');
 var Dialog = require('web.Dialog');
@@ -91,6 +92,11 @@ var AbstractWebClient = Widget.extend(mixins.ServiceProvider, {
     start: function () {
         var self = this;
 
+        // we add the o_touch_device css class to allow CSS to target touch
+        // devices.  This is only for styling purpose, if you need javascript
+        // specific behaviour for touch device, just use the config object
+        // exported by web.config
+        this.$el.toggleClass('o_touch_device', config.device.touch);
         this.on("change:title_part", this, this._title_changed);
         this._title_changed();