I am new in angular material design and I want to use large icon with md-icon attribute of angular material design i.e icon-4x.
<md-icon md-font-icon="icon-group" ng-class="icon icon-4x"></md-icon>
Thanks in advance.
Done by using class="icon-4x"
may be this help to other
<md-icon md-font-icon="icon-group" ng-class="icon" class="icon-4x"></md-icon>
Related
I use the material icon in my Angular app, and I want to use the two-tone icon.
How can I change the color of the icon?
I tried with the classic color: red; in my CSS file but doesn't work.
Can you help me, please?
Here are a Stackblitz example
Following this Thread you can use the color css key except for materials two tone theme which seems to be glitchy ;-)
A workaround is described in one of several angular material github issue's by using a custom css filter. This custom filter can be generated here.
E.g.:
Html:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Two+Tone|Material+Icons+Sharp">
<i class="material-icons-two-tone red">home</i>
css:
.red {
filter: invert(8%) sepia(94%) saturate(4590%) hue-rotate(358deg) brightness(101%) contrast(112%);
}
Attachments:
Working Angular Stackblitz
Codepen example
Codepen CSS filter Generator
I've encountered this HTML somewhere:
<button class="button--standard" mat-button mat-flat-button [disabled]=true >Disabled State</button>
I've never seen attributes of this format (mat-button mat-flat-button [disabled]=true) in HTML. What do they mean?
mat-button, mat-flat-button are specific attributes to Angular Material !
Overview here : Angular material buttons
And disabled is a native boolean HTML attribute !
Overview here : disabled attribute HTML
These attributes are used for Angular material buttons for material design styling.
For information visit the official link.
I recently started using angular-material and am struggling/unsure about opening/closing a mat-menu... I see in the examples on the angular-material documentation site that they assign an id to the menu and then apply a directive to the button that is used to toggle the menu. e.g. [matMenuTriggerFor]="menu"
How can I go about writing a directive that does that? I'm not sure how to pass a reference to a specific menu to a directive that then calls the toggle() method on the DOM element with that id?
The following code produces the errors:
Can't bind to 'matMenuTriggerFor' since it isn't a known property of 'button'.
There is no directive with "exportAs" set to "matMenu".
My code:
<li>
<button mat-icon-button [matMenuTriggerFor]="stockSystemMenu">
<mat-icon class="sn-item">
<i class="material-icons">archive</i>
</mat-icon>
</button>
<span class="sn-item" (click)="toggleMenu(stockSystemMenu)">Stok System</span>
<mat-menu #stockSystemMenu="matMenu">
<button mat-menu-item>
<mat-icon>
<i class="material-icons">chevron_right</i>
</mat-icon>
<span>Service 1</span>
</button>
</mat-menu>
</li>
There is confusion because Material introduced a breaking change as I understand it.. See material 2 Changelog - Breaking Changes
Starting with Material 2.0.0-beta.12. Use mat instead of md-*.. Seems only some of the docs at material.angular.io are updated with mat. Specifically, if you click view source and see md, I believe they have yet to replace it with mat.
So either update to Material 2.0.0-beta.12 and use mat-*, or use md-*.
"Your code is correct, you don't need to write matMenuTriggerFor directive, it is part of the API, make sure you have imported the MatMenuModule, MatButtonModule, and MatIconModule into your app module." - from comments
How can I design a nav-bar styled like the one Google+ has using
angular material ?
I don't know how to get this nav bar, and with the search box styled this way,
it thought material design made by google was used for this, but i can't see such things in angular material implementation.
I wanted to make a style similar to G+ for an app, coz it's very nice and suitable for that one.
Here you go!
It´s not exactly as the design but it´s a good starting point for you..
http://codepen.io/mackelito/pen/VKxGmR
Note: it´s just placeholders so no functionality yet.. have fun! :)
for the icons I have added
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
in the head tag
First of all, angular material provides no way to put in an input in that specific style. It implements the material spec; as it turns out, even google does not completely follow it. The navbar present on google+ other various google apps is not in the spec. This
<md-toolbar ng-show="!showSearch">
<div class="md-toolbar-tools">
<md-button ng-click="toggleSidenav('left')" hide-gt-md aria-label="Menu">
<ng-md-icon icon="menu"></ng-md-icon>
</md-button>
<h3>
Dashboard
</h3>
<span flex></span>
<md-button aria-label="Search" ng-click="showSearch = !showSearch">
<ng-md-icon icon="search"></ng-md-icon>
</md-button>
<md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)">
<ng-md-icon icon="more_vert"></ng-md-icon>
</md-button>
</div>
<md-tabs md-stretch-tabs class="md-primary" md-selected="data.selectedIndex">
<md-tab id="tab1" aria-controls="tab1-content">
Latest
</md-tab>
<md-tab id="tab2" aria-controls="tab2-content">
Favorites
</md-tab>
</md-tabs>
</md-toolbar>
is a great example of a material toolbar.
Also keep in mind that the input has no special integration with the toolbar, so you might have some problems.
I want to add a tooltip which would be displayed on mouse hover of the below elements.
<a ng-click="click(this)">
<span class="icon"></span>
</a>
{{product.title}}
I have the tooltip in product.desc.
I tried using the below code:
<span tooltip="{{product.desc}}" class="glyphicon"></span>
But this doesnt work.
Any Ideas/Suggestions? please help.
[EDIT] I can see the value of product.desc exists as expected in source of the page when i checked using developer tools.
Thankyou
Instead of
<span tooltip="{{product.desc}}" class="glyphicon"></span>
we need to give
<span data-toggle="tooltip" title="{{product.desc}}" class="glyphicon"></span>
None of the answers above solved my problem. This is what worked for me:
Instead of
<span data-toggle="tooltip" title="{{product.desc}}" class="glyphicon"></span>
we need to say:
<span data-toggle="tooltip" data-original-title="{{product.desc}}" class="glyphicon"></span>
Which version of angular are you using? A couple of things could be happening... I've spent the past 9 months developing angular apps all of which have leveraged the tooltip library.
Assuming you are using the tooltip library from angular-ui
Make sure you are referencing the angular-ui module in your in app.js module dependencies
angular.module('ValuesEntryApp', ['ui.bootstrap', ...more depedencies,]).config(funciton(){...});
Angular 1.3 has a known issue with angular-ui tooltips: issue/solution
Other things: You said that even if you use the title tag it still doesn't render a tooltip? I think it depends on what browser you use but I know atleast in chrome that if you hover and hold over an element with a title it will display the title for a short while. Is your glyphicon even rendering on screen?
Are there any errors in your console? Give us more info if you still seeking help. I could help get it working for you if we had more info on you dev setup.