@font-face {
  font-family: "Material Icons Outlined";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("material-icons/iconfont/MaterialIconsOutlined-Regular.eot");  
  src: local("Material Icons Outlined"), local("material-icons/iconfont/MaterialIconsOutlined-Regular"), url("material-icons/iconfont/MaterialIconsOutlined-Regular.woff2") format("woff2"), url("material-icons/iconfont/MaterialIconsOutlined-Regular.woff") format("woff"), url("material-icons/iconfont/MaterialIconsOutlined-Regular.otf") format("opentype");
 
  
  
}

[data-i]:before  {
  font-size:2em;
  font-family: 'Material Icons Outlined';
  content: attr(data-i);

}

.mi {
  color:var(--themeColor);
  font-family: 'Material Icons Outlined';
  cursor:default;
}
/* safari hack    vvvv   */
[di] { -webkit-appearance: none; overflow:hidden;color:var(--themeColor);position:relative;padding:10px;margin:5px;padding-bottom:3em;border:1px solid olive;width:5em;  cursor:default; }

[di=menu] {color:white;margin:0;padding:0;border:none;}
[di]:before {
  font-size: 2.4em;
  content: attr(di);
  font-family: 'Material Icons Outlined';
  
 
}

[di]:after {
 
  content: attr(title);
  text-align:center;
  position:absolute;
  left:0;
  bottom: 0px;
  height:2.7em;
  font-size:1em;
  color: gray;

  width:100%;


}

di.red:before {color:red}
[di=menu] {font-size:1em;z-index:10;color:white;}