Icon buttons

Icon buttons help people take supplementary actions with a single tap
Material Design Guidelines: Icon buttons
Example
Use icon buttons when a compact button is required, such as in a toolbar or image list. There are two types of icon buttons: standard and contained
favorite favorite favorite favorite favorite favorite 
        
  <wfc-icon-button>
    <wfc-icon>favorite</wfc-icon>
  </wfc-icon-button>
  
  <wfc-icon-button>
    <wfc-icon filled>favorite</wfc-icon>
  </wfc-icon-button>
  
  <wfc-icon-button filled>
    <wfc-icon>favorite</wfc-icon>
  </wfc-icon-button>
  
  <wfc-icon-button filled-tonal>
    <wfc-icon>favorite</wfc-icon>
  </wfc-icon-button>
  
  <wfc-icon-button outlined>
    <wfc-icon>favorite</wfc-icon>
  </wfc-icon-button>
  
  <wfc-icon-button outlined>
    <wfc-icon filled>favorite</wfc-icon>
  </wfc-icon-button>
Icon toggle button
If not using a variable icon, then the toggle state will not change between outlined and filled
favorite favorite settings favorite settings 
        
  <!-- Toggle with single icon will change the fill state -->
  <wfc-icon-button toggle>
    <wfc-icon style="font-family: Material Symbols Outlined alt">favorite</wfc-icon>
  </wfc-icon-button>
  
  <!-- Toggle with second icon filled -->
  <wfc-icon-button toggle filled>
    <wfc-icon style="font-family: Material Symbols Outlined alt">favorite</wfc-icon>
    <wfc-icon slot="selected">settings</wfc-icon>
  </wfc-icon-button>
  
  <!-- Toggle with second icon checked outlined -->
  <wfc-icon-button toggle outlined checked onchange="console.log(this.checked)">
    <wfc-icon style="font-family: Material Symbols Outlined alt">favorite</wfc-icon>
    <wfc-icon slot="selected">settings</wfc-icon>
  </wfc-icon-button>