visjs / vis-timeline

📅 Create a fully customizable, interactive timelines and 2d-graphs with items and ranges.
https://visjs.github.io/vis-timeline/
Other
1.73k stars 302 forks source link

Is it possible to use material design icons? #1176

Open mostopalove opened 2 years ago

mostopalove commented 2 years ago

I tried to use material design icons but it doesn't work. https://codepen.io/mostopalove/pen/LYyzMNw

How to set html content for item with classes?

fferaud commented 2 weeks ago

Hello,

I found a way to do that. I don't know if it's the better but it works :)

You have to change your options settings to whitelist mat-icon tags and properties and use the final form of mat-icon tag in your content item :

add in options :

xss: {
      disabled: false,
      filterOptions: {
           whiteList: {
               "mat-icon": ['role', 'class', 'aria-hidden', 'data-mat-icon-type'],
           },
       },
}

in content item : <mat-icon role="img" class="mat-icon notranslate material-icons mat-ligature-font mat-icon-no-color" aria-hidden="true" data-mat-icon-type="font">build</mat-icon>

Hope it works for you !