I have found "Material Design Iconic Font" library which is similar to md-icon and allow to create a stacked icon:
http://zavoloklom.github.io/material-design-iconic-font/examples.html
But wasn't able to create a stacked icon combining angular material icons.
https://material.angularjs.org/latest/api/directive/mdIcon
I'm already using angular material icons in my project, and don't want to include another library just for stacked icon.
Is there any way/work around we can combine md-icons to create a stacked angular material icons?
I laso had this problem once, if you want to do that you will need to use CSS for that.
Create 2 icon tags, put them in a container tag, and give this container a class.
Now you need to use CSS to stack the icons.
(you might want to set the position of the 3 tags to relative so they stack easily).
Related
I'm creating a website in which I use bootstrap to manage the responsivity of the website. in A section I've create some component in which is written something but because the text is too long I've give it a fixed size with overflow:hidden; I've seen the framework called masonry that let you to give to component different size and clicking on one of this you expand it.
in bootstrap official website I've found this example: Bootstrap and masonry example
but doesn't explain nothing.
how can I use masonry features in a bootstrap website with containers, row and cols?
How can I replace the icons used in Vaadin Flow components (calendar, upload etc) with my own icons? Is that even possible? I didn't see anything in component's API and it looks like the icons are font icons instead of the usual iron-icon.
Yes, the component icons are implemented using font icons. The main reason was that they should be customizable with a theme (CSS), which seemed impossible using iron-icon. Eventually we want to transition to using SVGs for the component icons as well.
So, to customize the component icons, you need to write a component style sheet, where you change the icon. You can either create your own icon font, or use a CSS background image. The latter option has the downside of not being able to change color easily, without swapping the whole image.
As an example, here’s what you’d write for the vaadin-date-picker component (assuming that’s what you meant by “calendar”).
[part="toggle-button"]::before {
content: ""; /* Remove the existing font based icon */
background-image: url(...); /* data uri */
}
Use a base64 encoded data uri, so that you don’t have to worry about using relative or absolute paths for the image.
To use that style sheet in your Flow-based app, place CSS file in the frontend folder in your app, and add the following:
#CssImport(value = "my-styles.css", themeFor="vaadin-date-picker")
I have an application with multiple Angular Material dialogues opened at the same time with a drag and drop feature. What I want is when I click a modal it should be placed in front, is there a way to do that using Angular Material or at least a CSS trick.
Thank you
I'm using the material design package for my application layout menu.
I have 2 menus items where I can't find an icon that fits, so I got 2 SVG files that I added to the project.
I want to use this as the material-list-item icon instead of a material-icon.
Is there a way to do this by either adding a custom icon to the material-icon library or replacing the icon in the list.
If yes, please I need a complete example as I am new to DartAngular, still trying to figure out some stuff.
There is a mixin for material-icon which will get allow you to change a material-icon into using an SVG. https://github.com/dart-lang/angular_components/blob/c6cb3d783e72ff1ed7974f18b7f169778c73d39b/angular_components/lib/material_icon/_mixins.scss#L49
There is indeed a mixin for this as pointed out in Ted Sander's answer, but for the moment it does not seem to work. I've asked this on Gitter but did not get an answer, and I also opened a ticket on Github for this seemingly broken feature.
It's a telltale sign that even the official Angular Components Gallery has a broken SVG icon example.
I'd suggest to implement this by using separate list item rendering for those that have an official material-icon representation and those that need a custom SVG image, and conditionally render them with the ngIf directive.
I am developing an app using Cordova and JQMobile . I have to place 5 icons on the header without any text.But I am able to place only two per line as per the example on jqm demos page.Also the icons are displayed in seperate boxes rather than being displayed in the header itself.
What i want is http://tinypic.com/r/2qi5u6q/8
what i get is http://tinypic.com/r/ap777m/8
I have spent a lot of time and need someone's help