Enable me to use Material UI Icons in HTML and Markdown pane

[MarcSkovMadsen]

I would like to be able to use Material UI icons in HTML and Markdown panes.

I was able to by including the css_files globally.

https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=schedule,weekend,person,leaderboard

Please note I do include specific icon_names to minimize the bundle that needs to be loaded.

Then I can include in HTML panes using the html:

<span class='material-symbols-outlined card-icon'>{icon}</span>

Complication

It used to work for me in #143.

But as I started refactoring the application I found that suddenly the HTML pane gets disabled when the css url is included. My hypothesis is that its somehow related to the timing of when the icon css is loaded?

In the video at 00:07 you can see how the HTML panes are disabled when I include the css url. I can unhide by changing the css visibility to inherit manually. It affects all HTML panes including the Alert shown when there are errors in the code. Strange.

html-not-showing.mp4

[philippjfr]

Thanks for reporting! This is likely due to some handling in Panel that attempts to prevent flicker when loading external stylesheets. Maybe it doesn't correctly handle fonts. Will have to investigate.

[philippjfr]

There should also be no need to include the CSS URL at all.

[philippjfr]

panel-material-ui loads the whole icon set by default to support them in the application so you should never load it separately.

[MarcSkovMadsen]

Hmm. They dont show in the app currently when using html or markdown pane.

[MarcSkovMadsen]

I'm not sure including them for usage in ReactComponent will also expose them for usage in plain HTML or Markdown pane.

[MarcSkovMadsen]

For the record the Material Design Icons (mdi) can be used as shown below

import panel as pn
import panel_material_ui as pnmui

pn.extension(css_files=["https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css"])



pn.pane.HTML("""
Bob lives in a <span class="mdi mdi-home"></span>.
""").servable()

[MarcSkovMadsen]

I tried to create a custom indicator card. But creating it from ReactComponent icons does not work. While if I create it from MaterialWidget and build it with the project it does.

From ReactComponent

ChangeIndicator.jsx

import { Card, CardContent, Typography, Box, Icon } from '@mui/material';
import 'material-icons/iconfont/material-icons.css';

/**
 * A reusable change indicator card displaying a metric, its change, and an icon.
 *
 * Props:
 * - title: Label for the metric
 * - icon: Name of the Material Icon to display
 * - value: Current value of the metric
 * - changePercent: Percentage change (positive or negative)
 * - since: Text describing the period, e.g. "Since last week"
 */
const ChangeIndicator = ({ title, icon, value, changePercent, since }) => {
  const isPositive = changePercent > 0;
  const changeColor = isPositive ? 'success.main' : 'error.main';
  const changeSymbol = isPositive ? '+' : '';

  return (
    <Card
      sx={{
        position: 'relative',
        borderRadius: 2,
        boxShadow: 2,
        padding: 2,
        width: '100%',
        overflow: 'visible',
      }}
    >
      <Box
        sx={{
          position: 'absolute',
          top: 16,
          right: 16,
          bgcolor: 'grey.800',
          color: 'common.white',
          borderRadius: 1,
          padding: 1,
          boxShadow: 3,
          display: 'inline-flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Icon fontSize="small">{icon}</Icon>
      </Box>

      <CardContent sx={{ "&:last-child": {"padding": "0px" }}}>
        <Typography variant="subtitle2" color="text.secondary" gutterBottom>
          {title}
        </Typography>

        <Typography variant="h4" component="div" gutterBottom sx={{ color: 'text.primary', fontWeight: 'bold' }}>
          {value}
        </Typography>

        <Typography variant="caption" color="text.secondary">
          <Box component="span" sx={{ color: changeColor, fontWeight: 'bold' }}>
            {`${changeSymbol}${changePercent}%`}
          </Box>
          &nbsp;{since}
        </Typography>
      </CardContent>
    </Card>
  );
};

export function render({model}) {
    const [title]=model.useState("title")
    const [icon]=model.useState("icon")
    const [value]=model.useState("value")
    const [change_percent]=model.useState("change_percent")
    const [since]=model.useState("since")
    return <ChangeIndicator title={title} icon={icon} value={value} changePercent={change_percent} since={since}></ChangeIndicator>
}

class ChangeIndicator(ReactComponent):
    value = param.String(default="")
    title = param.String()
    icon = param.String()
    change_percent = param.Number()
    since = param.String()

    _importmap = {
        "imports": {
            "@mui/material": "https://esm.sh/@mui/material@6.4.9",
            "material-icons/": "https://esm.sh/material-icons@1.13.14/",
        }
    }
    
    _esm = "ChangeIndicator.jsx"

ChangeIndicator(
    title="Today's Money", icon="weekend", value="$53,000", change_percent=55, since="since yesterday", width=800
).servable()

So again Material UI Icons are not just generally available and imported.

[MarcSkovMadsen]

I will add an Icon indicator widget. See #143 (comment).

This will solve the issue for the dashboard reference example. It will not solve the general issue though.