Change icon background color lwc

You can also use the other simple way by embedding icon in the lightning-button

<lightning-button variant="success" label="Next" title="Next" icon-name="utility:forward" icon-position="right" class="slds-m-left_x-small"></lightning-button>

More information : https://developer.salesforce.com/docs/component-library/bundle/lightning-button/example

                                 OR

In your case : Use variant="bare-inverse" in lightning-button-icon

<button class="slds-button slds-button_neutral" style=" border: none;background-color: #04844B;color: white;">Next
<lightning-button-icon icon-name="utility:forward"  variant="bare-inverse" alternative-text="Settings" title="Settings"></lightning-button-icon>
</button>

Since Rahul's answer didn't address the border on mouse hover (and I was working on this anyway), I'm going to give you a second answer.

Key points:

• Per Rahul, you want to use the custom select event to set a selected property to true on the selected child component
• Similarly, you can use mouseover and mouseout events to set a public property on your child components that indicates if the mouse is hovering over that component or not.
• When a component is selected or moused over, you will want to iterate through your child components to make sure that A) the selected / hovered-over component has its relevant property set to true and B) all others have that property set to false.
• You can use slds-theme_inverse or slds-theme_alt-inverse to easily give your div a dark background and white text (as long as you like the colors Salesforce chose)
• You will probably want to use custom CSS to set the border. Something like border: 2px solid #1589ee;, probably (#1589ee is defined as Salesforce's brand border color in Lightning Design System)
• Borders have width to them. To avoid your components growing and shrinking as you add and remove the border, you'll want to make sure that un-moused-over components also have a border -- but a transparent one. Like this: border: 2px solid transparent;

Here's a Playground Link with a working prototype.

And here's another updated version of your code:

Parent HTML

<template>
    <div class="container slds-p-around_large slds-scrollable_y slds-theme_shade">
        <div class="slds-text-title_caps slds-text-title_bold slds-p-bottom_medium">
            My Cases
        </div>
        <div>
            <template if:true={cases.data}>
                <lightning-layout 
                    class="slds-grid slds-grid_vertical" 
                    horizontal-align="left"
                >
                    <template for:each={cases.data} for:item="currentcase">
                        <c-ma-case-list-item
                            data-id={currentcase.Id}
                            key={currentcase.Id}
                            macase={currentcase}
                            onselect={handleSelect}
                            onmouseover={handleMouseover}
                            onmouseout={handleMouseout}
                        ></c-ma-case-list-item>
                    </template>
                </lightning-layout>
            </template>
        </div>       
    </div>
</template>

Parent JS:

import { LightningElement, track, wire } from 'lwc';
import getCaseList from '@salesforce/apex/MA_CasesStore.getCaseList';

export default class MaMyCasesListView extends LightningElement {
    selectedCase;
    @wire(getCaseList) cases;

    handleSelect(event) {
        let caseId = event.detail;
        this.selectedCase = this.cases.data.find(c => c.Id === caseId);
        this.toggleListItems('selected', caseId);
    }

    handleMouseover(event) {
        this.toggleListItems('mouseIsOver', event.target.dataset.id);
    }

    handleMouseout(event) {
        event.target.mouseIsOver = false;
    }

    toggleListItems(property, caseId) {
        this.template.querySelectorAll('c-ma-case-list-item').forEach(item => {
            if (item.macase.Id === caseId) {
                item[property] = true;
            } else {
                item[property] = false;
            }
        });
    }
}

Child HTML

<template>
    <div 
        class={divClass}
        onclick={handleClick}
    >
        <lightning-layout 
            horizontal-align="left" 
            class="slds-grid slds-grid_vertical slds-text-align--left"
        >
            <lightning-layout-item class="slds-text-align--left">
                <b>{macase.Subject}</b>
            </lightning-layout-item>
            <lightning-layout-item class="slds-text-align--left slds-m-top_x-small">
                <lightning-layout>
                    <lightning-layout-item  size="4">
                        {macase.Status}
                    </lightning-layout-item>
                    <lightning-layout-item>
                        {macase.CaseNumber}
                    </lightning-layout-item>
                </lightning-layout>
            </lightning-layout-item>
        </lightning-layout>
    </div>
</template>

Child JS

import { LightningElement, api } from 'lwc';

export default class MaCaseListItem extends LightningElement {
    @api macase;
    @api selected;
    @api mouseIsOver;
    
    handleClick(event) {
        this.dispatchEvent(new CustomEvent('select', {
            detail: this.macase.Id
        }));
    }

    get divClass() {
        let cls = 'slds-p-around_small'
        if (this.selected) {
            cls += ' slds-theme_inverse';
        } 
        if (this.mouseIsOver) {
            cls += ' c-mouseover-border'
        }
        return cls;
    }
}

Child CSS

div {
    border: 2px solid transparent;
}

.c-mouseover-border {
    border: 2px solid #1589ee;
}