How to remove border around icon in lightning web component(LWC) - Salesforce Globe For You

How to remove border around icon in lightning web component(LWC)  - Salesforce Globe For You 

Solution: use variant="bare" for <lightning-button-icon> tag

Example:

removeBorderIconLWC.html

<template>

    <lightning-card title="Remvoing Border around Delete Icon in LWC">

        <lightning-button-icon icon-name="utility:delete" alternative-text="Delete" class="test slds-m-left_xx-small" 

        variant="bare" title="Delete"></lightning-button-icon>

    </lightning-card>

</template>

removeBorderIconLWC.js

import { LightningElement } from 'lwc';

export default class RemoveBorderIconLWC extends LightningElement {}

removeBorderIconLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>51.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

Output: