diff --git a/ui/webui/resources/polymer_overriding.html b/ui/webui/resources/polymer_overriding.html
index 22c1b015500..4ed841bbc53 100644
--- a/ui/webui/resources/polymer_overriding.html
+++ b/ui/webui/resources/polymer_overriding.html
@@ -35,7 +35,11 @@
         }
       }
       /* Default button */
-      :host {
+      /* Ignore buttons with style attribute as they are most likely
+          buttons that are copmletely overriding the default button
+          style, e.g. avatar icons. See
+          https://github.com/brave/brave-browser/issues/5977. */
+      :host(:not([style])) {
         font-family: Muli !important;
         border-radius: 20px !important;
         border: 1px solid;
@@ -43,20 +47,20 @@
         color: var(--brave-text-color) !important;
         outline: none;
       }
-      :host-context(.focus-outline-visible):host(:focus) {
+      :host-context(.focus-outline-visible):host(:not([style]):focus) {
         box-shadow: 0 0 0 3px var(--brave-focus-outline) !important;
       }
       /* Action button */
-      :host(.action-button) {
+      :host(:not([style]).action-button) {
         background-color: var(--brave-brand-color) !important;
         color: #ffffff !important;
         border: none !important;
       }
-      :host(.action-button:hover) {
+      :host(:not([style]).action-button:hover) {
         background: var(--brave-primary-hover) !important;
       }
       /* Not-action button */
-      :host(:not(.action-button):hover) {
+      :host(:not(.action-button, [style]):hover) {
         background: none !important;
         border-color: var(--brave-brand-color) !important;
         color: var(--brave-brand-color) !important;