Hi Team  , 
Can you help to display the icons horizontally 
i used this .icon { display: inline-block; }  but its not working

code: 

<template>
    <lightning-card>
        <div class="icon">
    <fieldset class="slds-form-element">
        <legend class="slds-form-element__legend slds-form-element__label">feedback form</legend>
        <lightning-helptext content="Your feed back helps us to improve"></lightning-helptext>
        <div class="slds-form-element__control">
           
            <template if:true={options}>
                <template for:each={options} for:item="opt">
                    <span key={opt.key} class="slds-radio">
                        <input type="radio" id={opt.key} value={opt.value} name="default" onchange={handleOnchange} />
                        <label class="slds-radio__label" for={opt.key}>
                            <span class="slds-radio_faux"></span>
                            <span class="slds-form-element__label">
                                <lightning-icon icon-name={opt.icon_name} alternative-text="Approved" title="Approved" size="large" class={opt.class}>
                                </lightning-icon>
                            </span>
                        </label>
                    </span>
                </template>
             </template>
        </div>
       
    </fieldset>
</div>
    <div class="slds-box">
        <p>{value}</p>
    </div>
    <div class="slds-box">
        <p>{valueList}</p>
    </div>

    <lightning-icon icon-name="utility:info_alt" alternative-text="Approved" title="Approved" size="small">
    </lightning-icon>
</lightning-card>
</template>
=========================
import { LightningElement } from 'lwc';

export default class RadioGroupButton extends LightningElement {

    value = '';
    valueList = [];
    options = [
        { label: 'Happy', value: 'Happy', icon_name: 'utility:smiley_and_people', class: 'green-rocket' },
        { label: 'UnHappy', value: 'UnHappy', icon_name: 'utility:emoji', class: 'blue-icon' },
        { label: 'Neutral', value: 'Neutral', icon_name: 'utility:sentiment_neutral', class: 'orange-rocket' },
        { label: 'Negative', value: 'Extremely Unhappy - Escalate', icon_name: 'utility:sentiment_negative', class: 'red-icon' },
       

    ];

    connectedCallback() {
        const copy = [];
        for (let i = 0; i < this.options.length; i++) {
            copy.push({ key: i, label: this.options[i].label, value: this.options[i].value, icon_name: this.options[i].icon_name, class: this.options[i].class })
        };
        this.options = copy;
    }

    handleOnchange(event) {
        console.log('event', event.target.name);
        console.log('event', event.target.value);
        this.value = event.target.value;
        this.valueList.push(event.target.value);

    }
}
=================
.css

.icon { display: inline-block; }