0

Below is the code for the Header on my LWC page. I am trying to reference the Standard channel_program_members icon. After a lot of tinkering I got it to display however the background color is missing. Conversely if I use the Account Icon only the background is displayed.

enter image description here

   <div class="slds-page-header slds-m-bottom_x-small">
    <div class="slds-page-header__row">
      <div class="slds-page-header__col-title">
        <div class="slds-media">
          <div class="slds-media__figure">
            <span class="slds-icon_container slds-icon-standard-channel_program_members" title="screening">
                <svg xmlns="http://www.w3.org/2000/svg" class="slds-icon" aria-hidden="true">
                    <use xlink:href="/_slds/icons/standard-sprite/svg/symbols.svg#channel_program_members"></use>
                </svg>  
              <span class="slds-assistive-text">screening</span>
            </span>
          </div>
          <div class="slds-media__body">
            <div class="slds-page-header__name">
              <div class="slds-page-header__name-title">
                <h1>
                    <span>Candidate Scrrening</span>
                    <span class="slds-page-header__title slds-truncate" title="test">{HeaderTitle}</span>
                </h1>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>

1 Answer 1

1

I believe its better to use lightning-icon component instead of svg. Maybe it will help?

<lightning-icon 
    icon-name="standard:channel_program_members" 
    alternative-text="channel program members" 
    title="channel program members">
</lightning-icon>

Resource:

1
  • 1
    That worked - thanks! Oct 4, 2022 at 18:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.