Is it possible to use own icons for ToggleButton

UI Components for React
Post Reply
Hanland
Posts: 11
Joined: 07 Jan 2018, 14:12

18 May 2018, 14:37

I have some custom icons that I would like to use for the on and off icons instead of the fa-* collection.

Is this possible???

This goes for any icon property I guess.

Regards

User avatar
aragorn
Posts: 3175
Joined: 29 Jun 2013, 12:38

30 May 2018, 08:23

You can use onIcon and offIcon properties of ToggleButton component.

Hanland
Posts: 11
Joined: 07 Jan 2018, 14:12

31 May 2018, 13:24

How do you specify the icon path? I have tried a "file" path as for the img src="path" but this does not work???

User avatar
aragorn
Posts: 3175
Joined: 29 Jun 2013, 12:38

01 Jun 2018, 11:43

After you create a custom icon name, you can add it with CSS;

Code: Select all

onIcon="myCustomOnIcon"

//css
body .myCustomOnIcon {
    background: url('...........');
    background-repeat: no-repeat;
    background-size: cover;
    height: 1em;
    width: 1.28571429em;
    position: relative;
    top: 2px;
}
You can change the above css according to yourself.

shilpikanade
Posts: 12
Joined: 04 Apr 2018, 19:45

06 Jul 2018, 01:17

Hey, Did you ever get this to work for you? I am trying to set the icon of the MegaMenu the same way but its not working for me.

Thanks, Shilpi

cagatay.civici
Prime
Posts: 17987
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

06 Jul 2018, 14:39

Here is a demo;

https://www.primefaces.org/primereact/#/togglebutton

If you have font-icons that would be easier.

trumpP
Posts: 20
Joined: 11 Aug 2018, 11:20
Contact:

17 Sep 2018, 14:08

0
down vote
This may help you. You can create a layer-list and add two item. First item is your custom drawable, the second is your icon.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="@drawable/list_bg_top"></item>
<item android:left="10dp">
<bitmap android:src="@drawable/waiting_status_btn"
android:gravity="center_vertical|left" />
</item>

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest