Open Closed

Placing abp-button icon on the right (after the text) #6154


User avatar
0
bozkan created

Hi,

Is it possible to place the button icon on the right for abp-button?

<abp-button iconClass="fa fa-save" [disabled]="form.invalid" [loading]="isProgress" > {{ 'AbpUi::Save' | abpLocalization }} </abp-button>

  • ABP Framework version: v6
  • UI Type: Angular

2 Answer(s)
  • User Avatar
    0
    Anjali_Musmade created
    Support Team Support Team Member

    Hello bozkan ,

    1. you can place the icon after label like below. <abp-button buttonType="submit" formName="book"> {{ 'AbpUi::Save' | abpLocalization }} <i class="fa fa-check"></i> </abp-button>
    2. If you want to manage with classes don't want separate <i> tag then <abp-button iconClass="fa fa-save float-end me-0 ms-2 custom-margin"> {{ 'AbpUi::Save' | abpLocalization }} </abp-button> And add this in styles.css .custom-margin { margin-top: 0.2rem !important; } Thanks,
  • User Avatar
    0
    bozkan created

    Hello bozkan ,

    1. you can place the icon after label like below. <abp-button buttonType="submit" formName="book"> {{ 'AbpUi::Save' | abpLocalization }} <i class="fa fa-check"></i> </abp-button>
    2. If you want to manage with classes don't want separate <i> tag then <abp-button iconClass="fa fa-save float-end me-0 ms-2 custom-margin"> {{ 'AbpUi::Save' | abpLocalization }} </abp-button> And add this in styles.css .custom-margin { margin-top: 0.2rem !important; } Thanks,

    Thank you

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11