Change colour of Icon

UI Components for React
Post Reply
chrishj
Posts: 205
Joined: 11 Jul 2011, 21:58

28 Sep 2022, 08:50

I have a menuBar with menuItems. Is it possible to set the Icon colours to a custom shade of white?

Code: Select all

{
			label: 'User',
			icon: 'pi pi-fw pi-user',
			items: [
				 {
					label: 'Login',
					icon: 'pi pi-fw pi-user-plus',
					command: () => {
						router.push('/api/auth/login');
					},
				},
			]
		}
				
PrimeReact: 8.5.0
NextJs: 13.0.0
Theme Apollo v7.0
Database pg 8.8.0
react-hook-foem: 7.38.0

Melloware
Posts: 3369
Joined: 22 Apr 2013, 15:48

28 Sep 2022, 13:44

Have you tried changing the color with style like this..

Code: Select all

{
			label: 'User',
			icon: 'pi pi-fw pi-user',
			items: [
				 {
					label: 'Login',
					icon: ''text-orange-500 pi pi-fw pi-user-plus',
					command: () => {
						router.push('/api/auth/login');
					},
				},
			]
		}
If you are using PrimeFlex this would turn the icon Orange. See: https://www.primefaces.org/primeflex/textcolor
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 12.0.0 / PF Extensions 12.0.1
PrimeReact 8.6.1

chrishj
Posts: 205
Joined: 11 Jul 2011, 21:58

28 Sep 2022, 19:09

Thanks this is great!!
I must have missed it in the documentation
PrimeReact: 8.5.0
NextJs: 13.0.0
Theme Apollo v7.0
Database pg 8.8.0
react-hook-foem: 7.38.0

Melloware
Posts: 3369
Joined: 22 Apr 2013, 15:48

28 Sep 2022, 19:15

It probably not but since they are FontIcons they respect the color of the style so they by default inherit the theme font color but you can change it per icon. :) That is the nice thing about Font Icons.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 12.0.0 / PF Extensions 12.0.1
PrimeReact 8.6.1

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest