How to import Material-Icons in Hyperstack?

Question

I try to use MaterialUi's <MenuIcon /> (like here https://material-ui.com/demos/app-bar/) in my Hyperstack-App but I get error below.

I installed @material-ui/icons with yarn, then I imported it in /app/javascript/packs/application.js like so

import * as Mic from '@material-ui/icons';
global.Mic = Mic;

then ran bin/webpack without errors.

Then I have something like this in a component:

   Mui.Toolbar() do

        if @menu == 'true'
          Mui.IconButton() do
            Mic.MenuIcon() {}
          end

...

But I get an error:

Uncaught error: RuntimeError: could not import a react component named: Mic.MenuIcon

What am I doing wrong?

Thanks a lot for your help :)

Answer 1

I answered the questions as if you were using Semantic UI whereas you asked about Material UI, so I will leave the first answer there for anyone using Semantic and now answer for Material UI.

The easiest approach for Icons is to import the Material Icon library in your layout HTML

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

And then simply use them in Material UI like this:

IconButton { Icon(fontSize: :large) { expand_icon } }

If you are importing the whole Material UI library as one object (as per your question) then it would be:

Mic.IconButton { Mic.Icon(fontSize: :large) { 'expand_more' } }

Also, I think that @material-ui/icons' does not include any methods, but just the icons themselves, so you may be able to just import it and then use the Icons (as the resources will be bundled by Webpack)

Answer 2

I don't see MenuIcon as class In Semantic UI, and have used Icons on Buttons like this:

So, if you were importing Material UI like this

Sem = require('semantic-ui-react');

Sem.Button(icon: true, labelPosition: 'left', primary: true) do
    Sem.Icon(name: :heart)
    SPAN { "Add Love" }
end

You may have to also import your Icon library (either in NPM or simply by including the Material CSS in your layout.

I find the best way to Import the Icons (and all the Semantic CSS) is by building using Yarn and then importing through Webpack like this

require('../../../vendor/semantic/dist/semantic.css');