I have a standard lightning dashboard component that has been added to a communities page. I'm trying to hide the red icon on a standard dashboard component on a community page shown below:

enter image description here

I've tried adding the following CSS to the community's stylesheet to hide the icon on the dashboard component. (I've confirmed that the CSS selector is correct using Chrome DevTools):

.slds-icon-standard-dashboard {display:none !important}

enter image description here

However, this does not result in any visible changes on the community page or in the component.

My questions are:

  1. Generally speaking, is it possible to modify the style of a standard lightning component on a community page using this approach?
  2. If so, how could I modify my CSS to achieve the desired effect of hiding the dashboard icon?

2 Answers 2


This is not possible because the dashboard component is located in an iframe.


You shouldn't, if you require customizations of this nature, you should create a custom component, since updates to the community or components could break your CSS.

If you are really motivated, you can use the browsers dev tools to chose the appropriate selector to override the styling.

fyi: just because it works in the devtools - doesn't mean it will actually work, check the dom tree and adjust your selector, usually to the highest level container.

  • 1
    As the question mentions, the CSS selector matches the target but the styling is not applied. Apr 17, 2019 at 1:40
  • 1
    if its in the shadow root - you can forget about trying
    – glls
    Apr 17, 2019 at 2:06
  • It was in an iframe, not shadow DOM but same principle. Apr 17, 2019 at 2:50

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .