Tailwind CSS Icon Button with Angular

Use this example to create user-friendly buttons with icon for your Tailwind CSS and Angular project.

Below we present you our Angular Icon Button example crafted with Tailwind CSS that will help you build enterprise-level applications with ease. Customize the component or add it directly to your project!

You first need to import the DUIIconButton Module into your application module 

    
 import { DUIIconButton } from "david-ui-angular";
 
  @NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, DUIIconButton],
    providers: [],
    bootstrap: [AppComponent],
  })
  export class AppModule {}
    
 
  import { faHeart } from '@fortawesome/free-solid-svg-icons';
  heartIcon = faHeart;
 
  <!-- Use DUI Button in html file -->
  <dui-icon-button color="gray">
    <fa-icon [icon]="heartIcon"></fa-icon>
  </dui-icon-button>

Icon Button Variants

You can use different variants of the button component by manipulating the variant attribute of the component. 

    
 
  import { faHeart } from '@fortawesome/free-solid-svg-icons';
  heartIcon = faHeart;
  <!-- Use DUI Button in html file -->
    <dui-icon-button size="md" variant="filled" color="gray">
    <fa-icon [icon]="heartIcon"></fa-icon>
  </dui-icon-button>
  <dui-icon-button size="md" variant="outlined" color="gray">
    <fa-icon [icon]="heartIcon"></fa-icon>
  </dui-icon-button>
  <dui-icon-button size="md" variant="text" color="gray">
    <fa-icon [icon]="heartIcon"></fa-icon>
  </dui-icon-button>
  <dui-icon-button size="md" variant="gradient" color="gray">
    <fa-icon [icon]="heartIcon"></fa-icon>
  </dui-icon-button>

Icon Button Size

You can use different sizes of the button component by manipulating the size attribute of the component 

    
 
  import { faHeart } from '@fortawesome/free-solid-svg-icons';
  heartIcon = faHeart;
 
  <!-- Use DUI Button in html file -->
  <dui-icon-button size="sm" color="gray">
    <fa-icon [icon]="heartIcon"></fa-icon>
  </dui-icon-button>
  <dui-icon-button size="md"  color="gray">
    <fa-icon [icon]="heartIcon"></fa-icon>
  </dui-icon-button>
  <dui-icon-button size="lg"  color="gray">
    <fa-icon [icon]="heartIcon"></fa-icon>
  </dui-icon-button>

Icon Button Colors

You can use different colors of the button component by manipulating the color attribute of the component 

    
 
  <div class="flex items-center gap-4">
    <dui-icon-button  color="gray">
      <fa-icon [icon]="heartIcon"></fa-icon>
    </dui-icon-button>
    <dui-icon-button   color="blue">
      <fa-icon [icon]="heartIcon"></fa-icon>
    </dui-icon-button>
    <dui-icon-button   color="red">
      <fa-icon [icon]="heartIcon"></fa-icon>
    </dui-icon-button>
    <dui-icon-button   color="yellow">
      <fa-icon [icon]="heartIcon"></fa-icon>
    </dui-icon-button>
    <dui-icon-button   color="green">
      <fa-icon [icon]="heartIcon"></fa-icon>
    </dui-icon-button>
 
  </div>

Rounded Icon Buttons

You can use rounded attribute of IconButton component to create rounded buttons.

    
 
  <div class="flex items-center gap-4">
    <dui-icon-button [rounded]="true" color="gray" variant="filled" >
      <fa-icon [icon]="heartIcon"></fa-icon>
    </dui-icon-button>
    <dui-icon-button [rounded]="true" color="gray" variant="outlined" >
      <fa-icon [icon]="heartIcon"></fa-icon>
    </dui-icon-button>
    <dui-icon-button [rounded]="true" color="gray" variant="text" >
      <fa-icon [icon]="heartIcon"></fa-icon>
    </dui-icon-button>
    <dui-icon-button [rounded]="true" color="gray" variant="gradient" >
      <fa-icon [icon]="heartIcon"></fa-icon>
    </dui-icon-button>
 
  </div>

Buttons Ripple Effect

You can turn on/off the ripple effect for the IconButton Component using ripple attribute.

    
 
  <dui-icon-button [ripple]="true" color="gray" variant="filled" >
    <fa-icon [icon]="heartIcon"></fa-icon>
  </dui-icon-button>
  <dui-icon-button [ripple]="false" color="gray" variant="filled" >
    <fa-icon [icon]="heartIcon"></fa-icon>
  </dui-icon-button>

Icon Button Properties

The following properties are available for dui-icon-button component. These are the custom properties that we've added for the icon-button component and you can use all the other native properties as well.

AttributeType Description Default
variantVariantchange button variantfilled
colorColorchange button colorgray
classNamestringAdd custom className for button''
sizebooleanChange button sizemd
fullWidthbooleanBlock level buttonfalse
roundedbooleanRounded buttonfalse
ripplebooleanToggle ripple effect in buttontrue

Type - Variant 

    
 
  type variant = 'filled' | 'outlined' | 'gradient' | 'text';

Type - Size 

    
 
  type size = 'sm' | 'md' | 'lg';

Type - Color 

    
 type colors =
  | "blue-gray"
  | "gray"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";