diff --git a/data/theme/calendar-arrow-left.svg b/data/theme/calendar-arrow-left.svg
new file mode 100644
index 000000000..d5d97b3c3
--- /dev/null
+++ b/data/theme/calendar-arrow-left.svg
@@ -0,0 +1,82 @@
+
+
+
+
diff --git a/data/theme/calendar-arrow-right.svg b/data/theme/calendar-arrow-right.svg
new file mode 100644
index 000000000..545da7ec5
--- /dev/null
+++ b/data/theme/calendar-arrow-right.svg
@@ -0,0 +1,82 @@
+
+
+
+
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 8f81c3668..622305121 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -761,6 +761,34 @@ StTooltip StLabel {
border-radius: 5px;
}
+.calendar-change-month-back {
+ width: 20px;
+ height: 20px;
+ background-image: url("calendar-arrow-left.svg");
+}
+.calendar-change-month-back:hover {
+ background: #999999;
+ background-image: url("calendar-arrow-left.svg");
+}
+.calendar-change-month-back:active {
+ background: #aaaaaa;
+ background-image: url("calendar-arrow-left.svg");
+}
+
+.calendar-change-month-forward {
+ width: 20px;
+ height: 20px;
+ background-image: url("calendar-arrow-right.svg");
+}
+.calendar-change-month-forward:hover {
+ background: #999999;
+ background-image: url("calendar-arrow-right.svg");
+}
+.calendar-change-month-forward:active {
+ background: #aaaaaa;
+ background-image: url("calendar-arrow-right.svg");
+}
+
.datemenu-date-label {
font-size: 16px;
font-weight: bold;
diff --git a/js/ui/calendar.js b/js/ui/calendar.js
index d1b646fae..e75c95214 100644
--- a/js/ui/calendar.js
+++ b/js/ui/calendar.js
@@ -214,19 +214,15 @@ Calendar.prototype = {
{ row: 0, col: 0, col_span: offsetCols + 7 });
this.actor.connect('style-changed', Lang.bind(this, this._onStyleChange));
- let [backlabel, forwardlabel] = ['<', '>'];
- if (St.Widget.get_default_direction () == St.TextDirection.RTL) {
- [backlabel, forwardlabel] = [forwardlabel, backlabel];
- }
- let back = new St.Button({ label: backlabel, style_class: 'calendar-change-month' });
+ let back = new St.Button({ style_class: 'calendar-change-month-back' });
this._topBox.add(back);
back.connect('clicked', Lang.bind(this, this._prevMonth));
this._dateLabel = new St.Label({style_class: 'calendar-change-month'});
this._topBox.add(this._dateLabel, { expand: true, x_fill: false, x_align: St.Align.MIDDLE });
- let forward = new St.Button({ label: forwardlabel, style_class: 'calendar-change-month' });
+ let forward = new St.Button({ style_class: 'calendar-change-month-forward' });
this._topBox.add(forward);
forward.connect('clicked', Lang.bind(this, this._nextMonth));