Lightning Page Header Icons missing background color

Question

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.

   <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>

Answer 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:

• https://developer.salesforce.com/docs/component-library/bundle/lightning-icon
• https://www.lightningdesignsystem.com/icons/