diff --git a/src/app/admin/layout-edit/designModeToggler.component.ts b/src/app/admin/layout-edit/designModeToggler.component.ts
index aefde58..a3f2944 100644
--- a/src/app/admin/layout-edit/designModeToggler.component.ts
+++ b/src/app/admin/layout-edit/designModeToggler.component.ts
@@ -1,15 +1,33 @@
-import {Component, Inject} from 'ng-forward';
+import {Component, Inject, Input} from 'ng-forward';
 import {DesignModeService} from './designMode.service';
 @Component({
     selector: 'noosfero-design-toggler',
-    templateUrl: 'app/admin/layout-edit/designModeToggler.html'
+    templateUrl: 'app/admin/layout-edit/designModeToggler.html',
+    inputs: ['knobLabel', 'onLabel', 'offLabel']
 })
-@Inject(DesignModeService)
+@Inject(DesignModeService, '$sce')
 export class DesignModeTogglerComponent {
 
-    icon: string = "&nbsp;<i class='glyphicon glyphicon-wrench'></i>&nbsp;";
+    @Input() iconClass: string = '';
+    @Input() knobLabel: string = '';
+    @Input() offLabel: string = '';
+    @Input() onLabel: string = '';
 
-    constructor(private designModeService: DesignModeService) {
+
+    constructor(private designModeService: DesignModeService, private $sce: ng.ISCEService) {
+    }
+
+    get icon(): string {
+        if (this.iconClass && this.iconClass.trim().length > 0 ) {
+            return '<i class=\'design-toggle-icon ' + this.iconClass + '\'></i>';
+        }
+        else {
+            return '';
+        }
+    }
+
+    getKnobLabel(): string {
+        return this.$sce.trustAsHtml(this.icon + this.knobLabel);
     }
 
     private _inDesignMode: boolean = false;
diff --git a/src/app/admin/layout-edit/designModeToggler.html b/src/app/admin/layout-edit/designModeToggler.html
index 085482e..74037df 100644
--- a/src/app/admin/layout-edit/designModeToggler.html
+++ b/src/app/admin/layout-edit/designModeToggler.html
@@ -1,8 +1,8 @@
 <toggle-switch
     html="true"
     ng-model="ctrl.inDesignMode"
-    on-label="{{'designMode.toggle.ON' | translate}}"
-    off-label="{{'designMode.toggle.OFF' | translate}}"
+    on-label="{{ctrl.onLabel}}"
+    off-label="{{ctrl.offLabel}}"
     class="switch-small"
-    knob-label="{{ ctrl.icon + ('designMode.label' | translate) }}">
+    knob-label="{{ ctrl.getKnobLabel() }}">
 </toggle-switch>
\ No newline at end of file
diff --git a/src/app/admin/layout-edit/designModeToggler.scss b/src/app/admin/layout-edit/designModeToggler.scss
new file mode 100644
index 0000000..02753f9
--- /dev/null
+++ b/src/app/admin/layout-edit/designModeToggler.scss
@@ -0,0 +1,23 @@
+ul.nav > li.toggler-container {
+    position: relative;
+    padding-top: 12px;
+}
+
+body.noosfero-design-on {
+
+    div.content-wrapper {
+        opacity: 0.5;
+    }
+}
+
+
+
+noosfero-design-toggler .ats-switch .knob i {
+	color: #999999;
+}
+
+
+.design-toggle-icon {
+    margin-left: 3px;
+    margin-right: 3px;
+}
\ No newline at end of file
diff --git a/src/app/layout/scss/_layout.scss b/src/app/layout/scss/_layout.scss
index 8a7fd75..f8abff4 100644
--- a/src/app/layout/scss/_layout.scss
+++ b/src/app/layout/scss/_layout.scss
@@ -35,24 +35,3 @@
 		padding: 0 20px 20px 20px;
 	}
 }
-
-
-body.noosfero-design-on {
-
-	div.content-wrapper {
-		opacity: 0.5;
-	}
-}
-
-ul.nav > li.toggler-container {
-	position: relative;
-	padding-top: 12px;
-}
-
-.noosfero-main-toolbar {
-	padding: 5px;
-	@include make-row();
-	margin-left: 0px;
-	margin-right: 0px;
-	background-color: #edecec;
-}
\ No newline at end of file
diff --git a/src/app/layout/scss/skins/_whbl.scss b/src/app/layout/scss/skins/_whbl.scss
index a915a40..23c6a18 100644
--- a/src/app/layout/scss/skins/_whbl.scss
+++ b/src/app/layout/scss/skins/_whbl.scss
@@ -282,11 +282,7 @@ $whbl-font-color: #16191c;
 		background-color: #fff;
 	}
 
-	noosfero-design-toggler .ats-switch .knob i {
-		color: #999999;
-	}
-
-	.ats-switch .knob {
+    .ats-switch .knob {
 		padding-right: 15px;
 	}
 
diff --git a/src/app/profile/toolbar.html b/src/app/profile/toolbar.html
index 367573d..f08808a 100644
--- a/src/app/profile/toolbar.html
+++ b/src/app/profile/toolbar.html
@@ -1,4 +1,9 @@
 <div class="noosfero-main-toolbar" permission="vm.profile.permissions" permission-action="allow_edit">
-    <noosfero-design-toggler class="pull-right"></noosfero-design-toggler>
+    <noosfero-design-toggler
+       [icon-class]="'glyphicon glyphicon-wrench'"
+       [knob-label]="'designMode.label'     | translate"
+       [on-label]="'designMode.toggle.ON'   | translate"
+       [off-label]="'designMode.toggle.OFF' | translate"
+       class="pull-right"></noosfero-design-toggler>
 
 </div>
\ No newline at end of file
diff --git a/src/app/profile/toolbar.scss b/src/app/profile/toolbar.scss
new file mode 100644
index 0000000..b090f18
--- /dev/null
+++ b/src/app/profile/toolbar.scss
@@ -0,0 +1,7 @@
+.noosfero-main-toolbar {
+	padding: 5px;
+	@include make-row();
+	margin-left: 0px;
+	margin-right: 0px;
+	background-color: #edecec;
+}
\ No newline at end of file
--
libgit2 0.21.2