How to set Icon Color and SideBarItem Text?

[GBBBAS]

Do you know how I can change the icon color and the color of the label of a SideBarItem?

[romanonatacha]

You need to pass the argument on SideBar component. text_color="#FFFFFF"

[GBBBAS]

I did try that first, but the text does not change when I pass values into that parameter

    dtc.SideBar([
        dtc.SideBarItem(id='id_1', label="Label 1", icon="fas fa-home"),
        dtc.SideBarItem(id='id_2', label="Label 2", icon="fas fa-chart-line"),
        dtc.SideBarItem(id='id_3', label="Label 3", icon="far fa-list-alt"),
        dtc.SideBarItem(id='id_4', label="Label 4", icon="fas fa-info-circle"),
        dtc.SideBarItem(id='id_5', label="Label 5", icon="fas fa-cog"),
    ]),
    html.Div([
    ], id="page_content"),
])

produces

and

layout = html.Div([
    dtc.SideBar([
        dtc.SideBarItem(id='id_1', label="Label 1", icon="fas fa-home"),
        dtc.SideBarItem(id='id_2', label="Label 2", icon="fas fa-chart-line"),
        dtc.SideBarItem(id='id_3', label="Label 3", icon="far fa-list-alt"),
        dtc.SideBarItem(id='id_4', label="Label 4", icon="fas fa-info-circle"),
        dtc.SideBarItem(id='id_5', label="Label 5", icon="fas fa-cog"),
    ],text_color="#ACC2FF"),
    html.Div([
    ], id="page_content"),
])

produces the same result

[GBBBAS]

You need to pass the argument on SideBar component. text_color="#FFFFFF"

I've done some more testing - the text_color appears to only change normal text objects like html.H5. As per the below, you can see the word "Hello" is changing colours, but the sidebaritems remain as is:

layout = html.Div([
    dtc.SideBar([
        html.H5("Hello"),
        dtc.SideBarItem(id='id_1', label="Label 1", icon="fas fa-home"),
        dtc.SideBarItem(id='id_2', label="Label 2", icon="fas fa-chart-line"),
        dtc.SideBarItem(id='id_3', label="Label 3", icon="far fa-list-alt"),
        dtc.SideBarItem(id='id_4', label="Label 4", icon="fas fa-info-circle"),
        dtc.SideBarItem(id='id_5', label="Label 5", icon="fas fa-cog"),
    ],text_color="#86E1B3", bg_color="#2c2c2c"),
    html.Div([
    ], id="page_content"),
])

produces

[GBBBAS]

Got it to work by adding another className to the icon field in the sidebaritem. I also increased the size of the icons and the row/line height.

Below is the code and the css

import dash_trich_components as dtc
from dash.dependencies import Input, Output
import dash
import pandas as pd
import dash_html_components as html

content_1 = html.Div('content 1')
content_2 = html.Div('content 2')
content_3 = html.Div('content 3')
content_4 = html.Div('content 4')
content_5 = html.Div('content 5')

layout = html.Div([
    dtc.SideBar([
        dtc.SideBarItem(id='id_1', label="Label 1", icon="fas fa-home icon-inactive"),
        dtc.SideBarItem(id='id_2', label="Label 2", icon="fas fa-chart-line icon-active"),
        dtc.SideBarItem(id='id_3', label="Label 3", icon="far fa-list-alt icon-inactive"),
        dtc.SideBarItem(id='id_4', label="Label 4", icon="fas fa-info-circle icon-inactive"),
        dtc.SideBarItem(id='id_5', label="Label 5", icon="fas fa-cog icon-inactive"),
    ], bg_color="#2c2c2c"),
    html.Div([
    ], id="page_content"),
])

external_stylesheets = [
    'https://use.fontawesome.com/releases/v5.8.1/css/all.css',
    'https://codepen.io/chriddyp/pen/bWLwgP.css'
    ]

app = dash.Dash(
    __name__,
    title="SSIP Studio",
    external_stylesheets=external_stylesheets,
    # these meta_tags ensure content is scaled correctly on different devices
    # see: https://www.w3schools.com/css/css_rwd_viewport.asp for more
    meta_tags=[
        {"name": "viewport", "content": "width=device-width, initial-scale=1"}
    ]
)

app.layout = layout

@app.callback(
    Output("page_content", "children"),
    [
        Input("id_1", "n_clicks_timestamp"),
        Input("id_2", "n_clicks_timestamp"),
        Input("id_3", "n_clicks_timestamp"),
        Input("id_4", "n_clicks_timestamp"),
        Input("id_5", "n_clicks_timestamp")
    ]
)

def toggle_collapse(input1, input2, input3, input4, input5):
    btn_df = pd.DataFrame({"input1": [input1], "input2": [input2],
                           "input3": [input3], "input4": [input4], 
                           "input5": [input5]})

    btn_df = btn_df.fillna(0)

    if btn_df.idxmax(axis=1).values == "input1":
        return content_1
    if btn_df.idxmax(axis=1).values == "input2":
        return content_2
    if btn_df.idxmax(axis=1).values == "input3":
        return content_3
    if btn_df.idxmax(axis=1).values == "input4":
        return content_4
    if btn_df.idxmax(axis=1).values == "input5":
        return content_5

if __name__ == '__main__':
     app.run_server(host='localhost', debug=True)

css

.sidenav---navtext---1AE_f {
  color: #ABABAB !important;
  font-size: 1.75rem;
  line-height: 75px !important; 
}

.sidenav---navicon---3gCRo {
  line-height: 75px !important; 
  height: 75px !important;
  font-size: 1.75rem !important;
}

.sidenav---sidenav-nav---3tvij .sidenav---sidenav-navitem---uwIJ- .sidenav---navitem---9uL5T {
  height: 75px; 
}

.icon-inactive {
  color: #ABABAB !important;
  font-size: 3em;
  vertical-align: middle !important;
  text-align: center;
  line-height: 75px !important;
}

.icon-active {
  color: #ffc107 !important;
  font-size: 3em;
  vertical-align: middle !important;
  text-align: center;
  line-height: 75px !important;
}

you get output like the below

Not sure if its the best way to do it, but hopefully it helps others.