[SalesForce] How to have both Icon and text inside a button in LWC

First off, you're on the right track.

One of the odd things with web components is this new concept of the Shadow DOM. With the Shadow DOM, you cannot style base components with either css classes or the style attribute. (Read up on the Shadow DOM here: https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_dom)

This means you will not be able to style the lightning-button, unfortunately. However, there's nothing stopping you from using a regular old HTML button. With that in mind, it's time to head on over to the Lightning Design System site for a code snippet. https://www.lightningdesignsystem.com/components/buttons/ provides us a few examples, including a button with an icon.

Additionally, you're slightly over complicating this logic of toggling on and off the active piece of the button. You can achieve the same functionality with a simple boolean variable and two getter methods. I took a stab at what this would look like for you below.

Another great place for some insights on lightning web components is the Trailhead Sample Gallery, so be sure to check that out if you haven't already. You can find the gallery here: https://trailhead.salesforce.com/sample-gallery

Javascript:

import { LightningElement} from 'lwc';

export default class PcSelectButtonFramework extends LightningElement {
    buttonClicked; //defaulted to false

    // Handles click on the 'Show/hide content' button
    handleToggleClick() {
        this.buttonClicked = !this.buttonClicked; //set to true if false, false if true.
    }

    get cssClass(){
        return this.buttonClicked ? 'slds-button slds-button_neutral active' : 'slds-button slds-button_neutral inactive';
    }

    get iconName(){
        return this.buttonClicked ? 'utility:hide' : 'utility:preview';
    }
}

Component:

<template>
    <button class={cssClass}>
        <lightning-icon icon-name={iconName} onclick={handleToggleClick}>Non Profit</lightning-icon>
    </button>
</template>

The answer on this post here for aura component can be adapted for LWC as follows, you can try it

HTML

<template>
<div class="exampleHolder">
    <template if:true={showLoadingSpinner}>
        <lightning-spinner class="spins" size="medium"></lightning-spinner>
    </template>
</div>
</template>

CSS

 .spins::after {
    position: absolute;
    content: 'Fetching Fields of the Object......';
    width: 100%;
    text-align: center;
    top: calc(50% + 3em);
    font-weight: bold;
}