diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 4cb71aa89..08f636f50 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -204,6 +204,12 @@ StTooltip StLabel {
     spacing: 4px;
 }
 
+.panel-button:active #appMenuIcon,
+.panel-button:checked #appMenuIcon,
+.panel-button:focus #appMenuIcon {
+    app-icon-bottom-clip: 2px;
+}
+
 .app-menu-icon {
     width: 24px;
     height: 24px;
diff --git a/js/ui/panel.js b/js/ui/panel.js
index 550ec2e87..2b315993d 100644
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -210,6 +210,8 @@ AppMenuButton.prototype = {
         this._container.connect('allocate', Lang.bind(this, this._contentAllocate));
 
         this._iconBox = new Shell.Slicer({ name: 'appMenuIcon' });
+        this._iconBox.connect('style-changed',
+                              Lang.bind(this, this._onIconBoxStyleChanged));
         this._container.add_actor(this._iconBox);
         this._label = new TextShadower();
         this._container.add_actor(this._label.actor);
@@ -280,6 +282,17 @@ AppMenuButton.prototype = {
                            onCompleteScope: this });
     },
 
+    _onIconBoxStyleChanged: function() {
+        let node = this._iconBox.get_theme_node();
+        let bottomClip = node.get_length('app-icon-bottom-clip');
+        if (bottomClip > 0)
+            this._iconBox.set_clip(0, 0,
+                                   this._iconBox.width,
+                                   this._iconBox.height - bottomClip);
+        else
+            this._iconBox.remove_clip();
+    },
+
     _stopAnimation: function(animate) {
         this._label.actor.remove_clip();
         if (this._updateId) {